CSS: БЕМ Блоки и элементы

Тут поговорим об одной из самых популярных методологий определения наименования классов для элементов в верстке. Попробуем разобраться в том, что такое блоки и элементы в этом подходе.

Но прежде чем предлагать решение проблемы хорошо бы сформулировать саму проблему. Итак, обычно в процессе верстки приходится иметь дело не с одним тегом , а множеством и не то что бы это множество было маленьким. Это могут быть сотни и даже тысячи тегов. Все они должны быть стилизованы.

Казалось бы в CSS есть селектор ""* и с помощью него всегда можно выбрать все теги, но вряд ли выбрав все теги можно реализовать какой то интересный дизайн, так как в этом случае все элементы будут иметь одинаковые свойства отображения.

Есть и другая крайность можно разметить все элементы используя селекторы по id, и стилизовать каждый тег отдельно. Этот способ часто используется в обучающих статьях потому, что в них обычно используется несколько тегов и нет проблем описать стили для каждого элемента, так как они уникальны на странице. И главный недостаток тут в том, что одни и те же стили нельзя переиспользовать несколько раз. Хотя очевидно что на сайтах часто можно встретить повторяющиеся части которые выглядят похожим образом.

На практике же, как часто это бывает, нужно применять более гибкие подходы. Нужно иногда применять правила к множеству элементов, а иногда к единицам. Интересно, что реализовать эту гибкую систему можно множеством способов.

Первое что приходит на ум из знания селекторов - это использовать все их многообразие на полную мощь. Селекторы по id для уникальных элементов, селекторы по тегам для множеств элементов, селекторы по атрибутам для специальных случаев например ссылок, селекторы по классам, когда нужно иметь разное отображение для одинаковых тегов. Этот способ работает ! Он хорош тем, что вы используете CSS селекторы “правильным” осмысленным способом, таким каким они были задуманы.

Но по моему, тут есть “ловушка” и заключается она в том, что при создании новых правил и новых элементов дизайна нужно всегда учитывать состояние других уже наложенных правил, которые были наложены через селекторы по тегам, по id, атрибутам.

Почему это плохо? Во первых это сложно держать в голове, некое знание о системе стилей в целом, о том какие есть общие стили на документе.

Во вторых, если над проектом работает несколько человек то и идеи заложенные в любую “нестандартную” систему задания селекторов, нужно обговаривать и распространять между всеми членами команды.

Даже если над проектом работает один человек, всегда есть шанс, что поддерживать его будет другой человек и на этом этапе тоже, могут возникнуть трудности.

Зачастую видение смыслов и знание видов селекторов у разных людей различное и поэтому возникают недопонимания и принимаются не самые оптимальные решения. (Это кстати довольно общая мысль, применимая не только в данной теме)

Например изначально сайт был сверстан человеком который очень любит использовать селекторы по классам. Затем в проект приходит разработчик который хочет сделать “небольшую” правку не разбираясь в общей системе и зная, что селектор по id всегда тяжелее селектора по классу применил его для своего небольшого куска верстки.

Так происходит обычно потому что во-первых “не хочется ничего ломать” уже в работающем продукте , а так же не хочется делать “лишнюю” работу и “забивать голову лишними знаниями”, о том какие были идеи заложены в верстку на этапе создания сайта. Это вполне понятная мотивация и вряд ли тут можно убедить людей делать иначе.

При этом подходе возникает проблема “общих стилей”, теперь правки в них могут сломать эту “небольшую” правку так как как она завязана на эти " общие стили".

Затем может возникнуть другая проблема та самая “небольшая” правка хорошо себя проявила! Теперь нужно распространить ее в другие места. Очевидно, что селектор по id в этом случае становится не такой хорошей идеей как это было изначально.

То есть в итоге сэкономив время на “не ломать” и “не знать” затрудняется дальнейшее развитие верстки этой части страницы. Так же интересно, что эта проблема не заметна до тех самых пор пока правки не приходятся в одно и тоже место дважды, по этому часто бывает что общая система стилей перестает быть общей “не заметно”, и в итоге естественным образом получается система основанная на не зависимых блоках, тех самых id из “небольшой правки”.

Поэтому хорошей идеей считается сразу размышлять в терминах небольших не зависимых блоков и пропускать этот период “наивной общей системы стилей”.

Итак если сайт состоит из блоков значит ли это что все они уникальны и их нужно стилизовать через id ? Нет так как блоки могут дублировать себя и внутри одних и тех же блоков могут быть другие блоки.

Что такое блок в данной концепции? Идея этих самых блоков тут самая важная и от нее нельзя никуда деться если придерживаться “не ломать” и “не знать”. Блок тут - это не просто один html элемент, а сразу группа таких элементов. Это несколько элементов, которые объединены зачастую только смыслом, как это было в той “небольшой правке”. Важно что бы это было действительно небольшая правка, так как тут есть зависимость между размером этой группы тегов и ее полезностью.

Под “полезностью” блоков обычно понимается возможность их переиспользования в рамках сайта или даже вне этих рамок. Например если мы знаем что на сайте есть “кнопки” то можно создать одинаковый набор html элементов и css стилей для этого блока на сайте. И в дальнейшем “не ломать” и “не знать” там где нужна кнопка просто вставлять ее в виде набора тегов - то есть блока “кнопки”.

Набор тегов в рамках смыслового блока принято называть элементами блока. То есть, любой блок состоит из элементов. Блок это единица смысла на странице например кнопка, ссылка, заголовок, подвал… Его элементы это физическое html воплощение , , , .

Разобравшись в том что такое эти блоки можно задуматься над техническими деталями. Как же на на уровне html css определять стили для них что бы “не ломать” и “не знать”. Если все равно не понятно можно написать комментарий уточнить, обвинить!