Если вы похожи на меня, то вы тратите слишком много времени на то, чтобы придумать идеальное имя класса для элемента. Вы можете использовать Google для синонимов или представить, каким был бы этот элемент, если бы это был реальный объект. Вы знаете, что любое семантическое имя будет работать, но попытка придумать идеальное имя как-то стоит того.
Если честно, идеальное имя не сильно поможет вашей таблице стилей, но использование методологии CSS может иметь большое значение.
Примеры методологий CSS
OOCSS — это экологически чистый совет, помогающий вам писать устойчивые уроки с помощью стилей утилизации.
SMACSS — это всеобъемлющий план игры CSS, который научит вас всем правильным методам.
Idiomatic CSS — это аналитическая уборка дома, которая организовывает все в едином стиле для легкого распознавания и спокойствия.
И БЭМ ? Что ж, BEM — это золотой стандарт именования классов CSS, с которым сравниваются все схемы именования классов CSS.
Так зачем еще говорить о присвоении имен классам?
БЭМ-подход заключается в написании масштабируемого CSS с акцентом на удобочитаемость и избежание коллизий. Короче говоря, БЭМ расшифровывается как Block__Element – Modifier. Блок — это элемент, который включает в себя небольшой фрагмент связанных элементов (в SMACSS это называется модулем). Элемент является потомком блока и обычно не существовал бы без присутствия блока. Модификатор контролирует состояние блока.
В БЭМ вы пишете обычное имя класса для блока, а для любого элемента вы копируете имя блока и добавляете имя элемента.
Обычный БЭМ выглядит так:
<div class="block block--modifier"> <p class="block__element"> </div> Это хорошо, потому что любой поймет, что «block__element» относится к «block», и маловероятно, что класс «block__element» был использован где-либо еще в проекте.
Но есть проблема с этим подходом. Вы пишете CSS весь день, и вы не хотите писать длинные имена классов, которые портят вашу чистую разметку.
Название CSS — это предоставление вам преимуществ BEM без добавления префиксов или специальных символов к именам классов.
Трюк с названием CSS прост
Используя CSS заголовка, вы должны сделать следующее: Для любого глобального класса CSS используйте заглавное имя (регистр заголовка). Для любого модификатора или класса-потомка используйте строчную букву для начала имени.
Это означает, что с заголовком CSS вы пишете с заглавной буквы любое имя класса, на которое будут ссылаться в таблице стилей без родительского класса. Это означает, что даже объекты в OOCSS становятся заглавными. Различие простое; все, что написано с заглавной буквы в таблице стилей, не должно использоваться снова.
Вот пример того, как будет выглядеть разметка при использовании Title CSS:
<div class="Title isModified"> <p class="descendant"> </div>
А вот как будет выглядеть соответствующий CSS:
.Title {} .Title.isModified {} .Title .descendant {}
Почему название CSS работает
Идентификаторы блока или классы «Заголовок» создают область видимости для всех классов-потомков в блоке. Классы-потомки могут повторяться в других блоках заголовка без столкновения стилей.
Это не является жизненно важным для работы методологии, но, поскольку имя класса HTML учитывает регистр , классы «Заголовок» также можно свободно повторять как классы-потомки.
Как заголовок CSS помогает?
Используя методологию Title CSS, вы увидите следующие преимущества:
- Пишите CSS классы более естественным образом.
- Селекторы CSS напоминают письменный язык, как английские предложения, начинающиеся с заглавной буквы.
- Более короткие имена классов быстрее вводить и легче сканировать.
- Классы заглавных букв легко обнаружить в разметке; чтобы увидеть, к какому классу относится нижний регистр, просто пройдитесь по узлам класса Title.
Ловушка и обходной путь
Титульный CSS может иметь проблемы, когда вы используете блок заголовка, чтобы содержать другие блоки. Если содержащий заголовок блок имеет тот же класс селектора потомков, что и тот, который он охватывает, то возникнет конфликт, и в этом случае вам следует использовать дочерний комбинатор в блоках заголовка, которые действуют как контейнеры.
Чтобы продемонстрировать проблему, ниже приведен пример разметки с присутствующей проблемой:
<div class="Container"> <header class="header"></header> <main class="body"> <section class="Title"> <div class="header"></div> <div class="body"></div> </section> <section class="Title"> <div class="header"></div> <div class="body"></div> </section> </main> </div>
И сопутствующий CSS:
.Container {} .Container .header {} .Container .body {} .Title {} .Title .header {} .Title .body {}
Обратите внимание, что стили, применяемые к .header и .body внутри .body , также будут применяться к другим .body элементам .header и .body . Чтобы избежать этого, вот решение:
.Container {} .Container > .header {} .Container > .body {}
При использовании селектора, использующего дочерний комбинатор ( > ), стили будут применяться только к прямым дочерним элементам, а не к другим вложенным элементам с такими же именами классов.
Слово о Сассе
Препроцессоры предоставляют отличный способ написания CSS для заголовков. Возможность вложения позволяет легко идентифицировать блоки заголовка в таблице стилей.
Вот пример заголовка CSS в SCSS:
.Title { &.modifier {} .descendant {} > .tightlyBound {} }
Обратная связь?
Как предлагают BEM, SMACSS и OOCSS, важно, чтобы блоки или модули были небольшими. Есть преимущества в производительности и удобстве обслуживания, включающие только элементы, тесно связанные с классом Title.
Если у вас есть какие-либо замечания или отзывы о Title CSS, я был бы рад услышать их в комментариях. И если вы хотите получить больше информации или хотите сотрудничать, обязательно ознакомьтесь с репозиторием GitHub для Title CSS .