Как правильно организовать верстку?

Использую Marsy (похоже на avocode) https://vk.com/markupeasy для быстрого копирования текста и стилей и сравнения текста в адаптивных макетах. Бутстрап, less, pug, собираю gulp, вместо pixel perfect использую картинку сайта как фон и вешаю горячию клавишу. Подгоняю с помощью live style. Плагины для gulp, на сбор pu, less, и релоад страницы, такой минимум. БЭМ и прочее лично мне не зашли, мне проще в pug блок сделать и его подключать.
Также использую самописный плагин для sublime, парсит кусок html и выдаёт правила css для него, очень ускоряет.

Получается так:
Пишем костяк на pug, быстро копируют текст с Marsy, прогоняют через плагин получаю список провил, вставляют в css или less , раскидываю стили также копируя в один клик из marsy, открываю браузер включаю live style и фоновую картинку и уже там подгоняю по пикселям. А после проверяют страницу скриптом, на наличие дублей в стилях, удаляю лишнее прям там же. Открываю css удаляю пустые правила. Готово.

Marsy тоже моя наработка, если что спрашивайте.

Какие инструменты и фраемворки стоит использовать для работы с css, js, html и почему?

Те которые имеют набор функций необходимый для проекта. Вы думаете есть 1 лучший? У них у каждого свои плюсы и минусы и выбрать оптимальный можно только вникнув в тз.

Есть ли что то, что позволит один раз нарисовать компонент, а потом удобно его использовать?

Пишите свои стили, а может и свой Framework и повторно используете. Для удобства есть less, sass, grunt, бэм
Советую взять какой-нибудь opensoure framework и посмотреть как он устроен, как он собирается из компонентов и т.д. Например - https://github.com/twbs/bootstrap

Очень советую в этом вам обратить внимание на MoDx.
Все что вы хотите там сделать проще простого.