Уровни правльности у всех разные. Если знаешь основы то используй инструменты и это будет правильно. А понимание что да как придет только с опытом. Возьмись переделать сайт какой нибудь и смотри что нравится тебе в его верстке, а что бесит. Если бесит то скорее всего это не правильно. Например абсолютное позицианироние всех блоков, попробуй добавить ещё блок и ты поймёшь что это плохая верстка. Я так считаю, а насчет инструментов, использую 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 тоже моя наработка, если что спрашивайте.
Простой
