От автора: иногда я сталкиваюсь с ситуациями, когда мне нужны дополнительные имена классов CSS для манипулирования стилями. Когда это происходит, я делю эти ситуации на стандартные типы и присваиваю каждому типу префикс имени класса, который представляет этот тип.
Классы состояний
Любой компонент может иногда нуждаться в состоянии — определенном условии, в котором к нему применяется определенный стиль.
Если мы возьмем, к примеру, main-nav, иногда нам придется определить, открыт он или нет. Здесь на помощь приходят классы состояний CSS.
<nav class="main-nav is-open"> </nav>
Вы можете использовать эти классы для описания типов сообщений, например:
<div class="common-message "> <!-- Gray Message --></div> <div class="common-message is-approved"><!-- Green Message --></div> <div class="common-message is-error "> <!-- Red Message --></div> <div class="common-message is-alert "> <!--Yellow Message --></div>
Или любое другое состояние, например: is-wide, is-top, is-small, is-double-size, is-scrolled, is-full-width и т.д. В этих случаях вы можете использовать столько классов, сколько вам нужно.
Как это выглядит в файле CSS / Sass:
.common-message{ /*component styles*/ &.is-approved { color:green; } &.is-error { color:red; } &.is-alert { color:yellow; } }Служебные классы
В других методологиях CSS служебные классы являются повседневными вещами. Однако в моем методе эти типы классов работают непосредственно с элементом HTML, в котором они расположены, и им разрешено вносить только одно изменение CSS!
Еще одна особенность моих служебных классов в том, что мы всегда используем их с правилом «!important». Служебные классы — единственный хороший пример использования !important. Зачем нам это нужно?! Все просто, когда мы используем эти классы, мы всегда хотим, чтобы они не изменялись для всего каскада CSS. Если мы не хотим, чтобы они переопределяли другие стили, нам нужно удалить класс из элемента HTML.
Пример служебных классов CSS:
.u-hide{ display:none!important;}Пример использования служебных классов в HTML:
<div class"common-message u-hide"></div>
Я не использую их часто, только в ситуациях, которые я описал. Служебные классы, так же как и классы состояний, можно использовать столько, сколько вам нужно.
Классы сущностей и классы страниц
Во многих проектах есть компоненты, которые дизайнер или менеджер проекта использует для неуниверсального дизайна. В этих случаях я использую один из двух подходов:
Сущности — при использовании компонента, стили которого должны слегка измениться, я добавляю к нему другое имя класса, которое начинается с префикса ‘e-’ , представляющего сущность, в дополнение к имени класса компонента.
Этот класс может добавлять или переопределять стили. Мое эмпирическое правило заключается в том, что вы можете добавить только одну сущность для каждого компонента. Если есть другой случай использования этого компонента, стили которого не на 100% одинаковы, лучше вместо этого создать другую сущность! Пример:
<section class="common-popup e-datepicker-popup"> </section>
Кроме этого, вы можете добавить столько классов CSS состояний / служебных классов, сколько захотите.
<section class="common-popup e-datepicker-popup u-hide"> </section>
Использование CSS:
.e-datepicker-popup{ /*add or override styles*/
}Примечание. Чтобы класс сущностей преобладал в борьбе каскадных стилей, его необходимо всегда записывать после имен классов обычных компонентов. Пример:
.common-popup{ /*common popup styles*/ } .e-datepicker-popup{ /*add or override style of common-popup */ }Страницы — каждую страницу на вашем сайте можно считать большой сущностью. Класс страницы используется в элементе body или в главном элементе, который охватывает все, имена этого класса начинаются с «p-». Например: «p-homepage» или «p-news» и т. д.
<body class="p-homepage"></body>
Лучше избегать использования этого метода, если это возможно, но иногда в реальной жизни бывают случаи, когда другого выбора нет. Пример использования:
.p-homepage .common-popup{ /*do some styles manipulations*/ }Этот класс может влиять на каждый партиал на странице.
Классы JavaScript
Существуют ситуации, в которых нам нужны имена классов CSS для выбора вещей в JS. Но так как одни и те же классы использовать проблематично для проектирования и выбора данных в JS, мы используем имена классов JS. Эти имена классов используются только для манипулирования данными, а не для добавления дополнительных стилей!
Если вам нужно добавить классы для стилей, используйте дополнительные классы в соответствии с методикой, описанной выше, например, служебные классы. Пример:
<section class="common-popup js-common-popup u-hide"> </section>
Заключение
Вот и все, надеюсь, вам понравилась эта статья, и вы узнали много нового.
Автор: Elad Shechter
Источник: https://medium.com
Редакция: Команда webformyself.