О наименованиях
В вёрстке абсолютно независимыми блоками, как ни странно, главное - корректно назвать блок/элемент/модификатор, и это достаточно трудоёмкий процесс. Почему это важно? Класс элемента, сконструированный с соблюдением единого принципа, однозначно указывает на его смысл и назначение. При этом хорошо читается его роль (блок, элемент блока) и/или модификация.
Каким должно быть это название? Во-первых, уникальным. Для блока - в рамках проекта, а для элемента - в рамках блока. Во-вторых, понятно и органично проекту описывающим назначение блока / элемента. Название должно максимально соответствовать системе терминов, принятой в проекте. Названия моделей, их атрибутов и т.п. должны соответствовать названиям блоков, их отображающих.
Нельзя допустить, чтобы название говорило о том, как элемент должен выглядеть, или какой тег ему соответствует. Много лучше, когда название объясняет, что это такое, каков смысл нахождения этого здесь. Про соответствие названия тегу вы, думаю, сами догадываетесь: ничто не вечно, и сегодня это <p>, а завтра <div> и т.д.
Плохо:
|
Хорошо:
|
Лирическое отступление. У меня иногда возникает ситуация, когда я с трудом даю определение блоку / элементу. И в основном это связано с «красотой» дизайна, не несущего смысловой нагрузки. В эти моменты я грущу, так как бессмысленность дизайнерскоро решения отражается на коде, усложняя его, приводит к потенциальным проблемам, усложняет рефакторинг. Уверен, хороший дизайнер всегда задаёт себе вопросы: что это? почему это здесь?..
О дублировании кода
Рефакторинг, перевёрстка - все эти слова больше не пугают, если названия хорошо сконструированы, не пересекаются, а стили изолированы друг от друга. Тут есть один тонкий момент, связанный с пересечением вёрстки. Часто возникает соблазн вынести общие стили, например, скругления уголков или одинаковые отступы справа, в отдельные классы или даже блоки и примешивать их к одному и тому же html. С одной стороны, это уменьшает дублирование кода, создаёт свой внутрипроектовый фреймворк, позволяет в одном месте изменить значение внешний вид блоков / элементов, к которым добавлены эти примеси. С другой стороны, если увлечься, вёрстка становится размытой и внешний вид блока определяет не один css, связанный только с ним, но также и куча других правил, раскиданных по проекту, а количество класcов на тегах становится устрашающим. Ещё один минус - потеря семантики, так как эти примеси говорят скорее о внешнем виде, чем о сути, и, о ужас, в проекте могут появиться теги, на которые повешены только лишь классы примесей, говорящие не о смысле, а о внешнем виде его. Эта тенденция похожа на деградацию до старых каскадов и глобальных стилей. Рефакторинг такой вёрстки затрудняется. Всё это говорит о том, что не стоит перебарщивать с вынесением общих стилей.
Плохо:
| |
Плохо:
|
Хорошо:
|
О префиксах
Что касается префиксов, то их использование не имеет особой необходимости. Раньше я использовал разные префиксы: b-, l-, .h, g- и т.п. Если посмотреть на код, то большинство классов получало префикс b-, и это не несло эффективной смысловой нагрузки, только усложняло редактирование. Некоторые префиксы, как h- раньше или i- сейчас, имеют проблемы, связанные с их пониманием. Например, i- префикс предлагается использовать для глобальных блоков, примесей, а также для интерактивных элементов, что само по себе неопределённо и размыто. С другой стороны, иногда использую префикс g- для глобальных стилей (например, g-clear или g-hide) и префикс m- для темизации страницы (вешаю на <body />). Если возвратиться к старым префиксам, то можно отметить префикс l-, который имеет некоторый смысл в плане улучшения читаемости кода. Если подвести итог, то префиксы по большому счёту не нужны и только загромождают код.
О тегах
Так как блок является смысловой единицей, главный, «рутовый» тег блока должен являтся смысловым в плане html-разметки страницы. Такими тегами являются section, article, aside, footer, header, nav. Тег div особой смысловой нагрузки не несёт, как и span, является нейтральным; их стоит использовать для задач оформления, то есть для экстра-разметки, необходимой, чтобы повторить изыски дизайна в вёрстке.
Плохо:
|
Хорошо:
|
О выделении блоков
При выявлении блоков наиболее удобным кажется направление сверху вниз. Это значит, что вёрстка начинается с внешнего блока, затем верстаются его элементы, а когда становится ясным, что элемент имеет свою нетривиальную структуру, или он может повториться в другом месте, или отчётливо видно различие смысла / предназначения верстаемого блока и этого элемента, тогда происходит выделение элемента в отдельный блок.
Было:
|
Стало:
|
Комментариев нет:
Отправка комментария