Описательные имена классов CSS

Описательные имена классов CSS

От автора: иногда я сталкиваюсь с ситуациями, когда мне нужны дополнительные имена классов CSS для манипулирования стилями. Когда это происходит, я делю эти ситуации на стандартные типы и присваиваю каждому типу префикс имени класса, который представляет этот тип.

Классы состояний

Любой компонент может иногда нуждаться в состоянии — определенном условии, в котором к нему применяется определенный стиль.

Если мы возьмем, к примеру, main-nav, иногда нам придется определить, открыт он или нет. Здесь на помощь приходят классы состояний CSS.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Вы можете использовать эти классы для описания типов сообщений, например:

Или любое другое состояние, например: is-wide, is-top, is-small, is-double-size, is-scrolled, is-full-width и т.д. В этих случаях вы можете использовать столько классов, сколько вам нужно.

Как это выглядит в файле CSS / Sass:

Служебные классы

В других методологиях CSS служебные классы являются повседневными вещами. Однако в моем методе эти типы классов работают непосредственно с элементом HTML, в котором они расположены, и им разрешено вносить только одно изменение CSS!

Еще одна особенность моих служебных классов в том, что мы всегда используем их с правилом «!important». Служебные классы — единственный хороший пример использования !important. Зачем нам это нужно?! Все просто, когда мы используем эти классы, мы всегда хотим, чтобы они не изменялись для всего каскада CSS. Если мы не хотим, чтобы они переопределяли другие стили, нам нужно удалить класс из элемента HTML.

Пример служебных классов CSS:

Пример использования служебных классов в HTML:

Я не использую их часто, только в ситуациях, которые я описал. Служебные классы, так же как и классы состояний, можно использовать столько, сколько вам нужно.

Классы сущностей и классы страниц

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

Сущности — при использовании компонента, стили которого должны слегка измениться, я добавляю к нему другое имя класса, которое начинается с префикса ‘e-’ , представляющего сущность, в дополнение к имени класса компонента.

Этот класс может добавлять или переопределять стили. Мое эмпирическое правило заключается в том, что вы можете добавить только одну сущность для каждого компонента. Если есть другой случай использования этого компонента, стили которого не на 100% одинаковы, лучше вместо этого создать другую сущность! Пример:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Кроме этого, вы можете добавить столько классов CSS состояний / служебных классов, сколько захотите.

Использование CSS:

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

Страницы — каждую страницу на вашем сайте можно считать большой сущностью. Класс страницы используется в элементе body или в главном элементе, который охватывает все, имена этого класса начинаются с «p-». Например: «p-homepage» или «p-news» и т. д.

Лучше избегать использования этого метода, если это возможно, но иногда в реальной жизни бывают случаи, когда другого выбора нет. Пример использования:

Этот класс может влиять на каждый партиал на странице.

Классы JavaScript

Существуют ситуации, в которых нам нужны имена классов CSS для выбора вещей в JS. Но так как одни и те же классы использовать проблематично для проектирования и выбора данных в JS, мы используем имена классов JS. Эти имена классов используются только для манипулирования данными, а не для добавления дополнительных стилей!

Если вам нужно добавить классы для стилей, используйте дополнительные классы в соответствии с методикой, описанной выше, например, служебные классы. Пример:

Заключение

Вот и все, надеюсь, вам понравилась эта статья, и вы узнали много нового.

Автор: Elad Shechter

Источник: https://medium.com

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook: