Существует множество методологий CSS, и я ненавижу их все. Какие-то больше (попутный ветер и др.), какие-то меньше (БЭМ, OOCSS и т. д.). Но, в конце концов, у всех есть недостатки.

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

Это не полностью описанная методология CSS, которую каждый мог бы просто начать использовать. Возможно, его можно было бы превратить в один, проделав дополнительную работу, но цель этого поста — просто показать, как я принимаю эти решения при написании CSS.

Встроенные элементы

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

Потребность в тысяче различных типов кнопок является признаком того, что с дизайном может быть что-то не так на более глубоком уровне, поэтому, хотя в некоторых случаях я понимаю, что CSS остается инертным до тех пор, пока не будут использованы классы, специфичные для платформы. , в большинстве случаев мне кажется идеальным, когда кнопка представляет собой просто Click Me! и выглядит как кнопка без какой-либо дополнительной магии.

div.btton должен превратиться в кнопку

Пользовательские элементы

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

Я не видел много случаев, когда имена пользовательских элементов использовались без какого-либо сопутствующего JavaScript, но это оказалось на удивление надежным выбором для написания понятного HTML, который также выглядит так, как я хочу.

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

div.vsep должен превратиться в вертикальный разделитель

Классы

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

Опасная кнопка — это кнопка.опасность

Атрибуты

Некоторые способы изменения элементов не являются простыми переключателями включения/выключения, для которых полезны классы, а ведут себя скорее как пары ключ-значение.

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

Для тех из нас, кто все еще надеется, что функция attr() однажды может появиться в CSS не только для контента, это еще и дополнительный уровень готовности к будущему.

идентификаторы

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

Поэтому идентификаторы следует использовать с осторожностью и только тогда, когда нет смысла иметь более одного элемента в одном документе.

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

Встроенный CSS

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

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

Единственное различие между стилем и классом для встраивания стилей заключается в том, что один указывает цель, позволяет использовать простой CSS и в основном является универсальным, а другой — нет.

Проще говоря, ширина: 100 пикселей имеет универсально определенное значение, тогда как .width-100 может означать что угодно.

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

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

В этих случаях служебные классы — практически единственный вариант, даже если они уродливы.

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

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

Красная плавающая кнопка

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

Что вы думаете? Ты ненавидишь это? Как вы думаете, это имеет смысл? Дайте мне знать в комментариях?