Прекращение конфликтов CSS с помощью модификатора блочного элемента
19 мая 2022 г.У вас проблемы со стилем CSS?
Добавление селекторов и свойств не работает? Не любите стиль и не видите изменений? Вы обнаружили, что отображаются стили, которые вы не включили? или этот div не будет правильно выравниваться? У меня для вас отличные новости.
CSS очень полезен для стилизации HTML-элементов. Вам когда-нибудь не удавалось связать свой файл CSS с кодом HTML и видеть, как ужасно выглядит ваша веб-страница? Однако при написании стилей часто возникает конфликт CSS в результате наследования от родителей или предков. Эти конфликты очень раздражают.
Чтобы организовать свой CSS и сделать его СУХИМ, вы могли бы написать глобальные стили, используя селекторы элементов или повторно используемые классы, а затем переопределить их другими классами, используя специфичность посредством вложенности. В целом это неплохой подход, но я могу облегчить вам жизнь и помочь вам следить за тенденциями в отрасли.
Модификатор блочного элемента (BEM)
Я представляю вам BEM, новейшую передовую практику написания CSS, упрощающую кодирование. БЭМ — это руководство, а не технология или новый фреймворк, поэтому вам не нужно обновлять свое резюме. Вы ничего не загружаете и не устанавливаете, вы просто изучаете это и применяете к своему коду.
Это набор правил о том, как называть и использовать больше классов CSS. БЭМ расшифровывается как «модификатор элемента блока» и предполагает, что ваши классы CSS следуют этому порядку, как показано ниже.
<раздел класс="блок">
Блок класса относится к родительскому контейнеру различных связанных элементов, а класс block__element относится к его содержимому. Это содержимое может иметь разные стили CSS, поэтому, чтобы различать их, вы можете прикрепить модификатор к его классу, как в block__element--modifier.
Обратите внимание, что «__» разделяет блок и элементы, а «--» прикрепляет модификаторы к элементам. В отличие от модификаторов классы с более чем одним словом в качестве имени разделяются «-». Это соглашение, которое помогает любому, кто читает код, легко определить эти различия.
Например: Создание раздела блога может выглядеть так с БЭМ
```разметка
Лучшая жизнь
Основные советы для жизни
5 дополнительных советов
Кроме того, БЭМ рекомендует применять к CSS принцип единой ответственности, создавая классы, которые хорошо выполняют одну задачу, и позволяют элементам использовать несколько классов.
Почему я хочу упростить написание CSS с помощью БЭМ?
- Предотвращает конфликты CSS
В основном это вызвано вмешательством наследования в стили CSS. HTML-элементы должны следовать преднамеренному стилю, а не автоматически наследовать стили. Это предотвращает принудительное применение стилей к элементам, обеспечивая при этом простой и предсказуемый стиль.
- Позволяет повторно использовать классы для DRY Code
Классы в CSS должны были совместно использоваться несколькими элементами, где это применимо, поэтому БЭМ ускоряет и упрощает стилизацию похожих структур.
- Лучше читаемый код
Если вы будете следовать правилам БЭМ, это доказано, и вы уверены, что ваш код будет читаем в любой точке мира, даже на Марсе. Проверено и проверено.
- Вот как лучший в отрасли код
Что ж, современные тенденции технологических гигантов поддержали и приняли БЭМ. Таким образом, его использование показывает, что вы модны и обновлены правильно!
Вывод
Поздравляем!!!
Надеюсь, вам понравилось изучать новый способ написания CSS? BEM — это новейший отраслевой стандарт для написания кода DRY HTML/CSS.
Если вам нужна дополнительная ясность и справочная информация по БЭМ, посетите http://getbem.com/?msclkid=b873793ed03f11ecb9a960bceb3e5280.
Оригинал