Пишем хороший CSS

Хороший специалист всегда пытается научиться чему-то новому. При этом, он также пытается найти способы усовершенствовать то, каким образом он все это делает. Каждый разработчик стремится улучшить свой CSS, как для своей постоянной работы, так и для сторонних проектов клиентов. Что для этого нужно сделать? Найти то, что делает CSS хорошими, читабельными и легко обслуживаемыми. Вот несколько способов, как это можно сделать:

Проблемы

Есть несколько раздражающих моментов в CSS:

• Повторение общего кода
  
  • Префиксы браузеров
    
  • Недостаток комментариев
    
  • Слишком определенные селекторы
    
  • Неполноценные имена классов

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

Когда речь идет о работе в команде, не стоит брать на себя всю ответственность. По факту, проблемой отчасти является количество людей, которые приложили руки к проекту. Ситуация усложняется тем, что периодически меняется состав команды, а также устареванием той или иной части кода.

Кроме того, некоторые программисты почему-то считают, что их код самодокументируется, проще говоря, они не пишут комментариев.

Решения

Несмотря на то, что ничто в этом мире не идеально, есть способы улучшить наш код. Некоторые такие способы рассматриваются в руководстве Гарри Робертса \"Профессиональный совет и руководства по написанию адекватных, управляемых, настраиваемого CSS\"

Комментарии

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

Объектно-ориентированное программирование

Объектная ориентация это парадигма программирования, которая разбивает большие части на меньшие. Из Википедии: Объектно-ориентированное программирование (ООП) парадигма программирования, которая представляет концепцию объектов [ ], которые обычно являются примерами классов, [и] используются для взаимодействия друг с другом для разработки приложений и компьютерных программ

Когда речь идет о CSS, мы называем это объектно-ориентированными CSS, или ООCSS. Базовая концепция разбивает структуру элемента, начиная с оболочки элемента. Это означает, что мы можем легко использовать еще раз любые повторные шаблоны дизайна без необходимости в то же время использовать определенные моменты реализации. OOCSS в основном фокусируются на повторном использовании кода, что позволяет работать быстрее и сокращать размер базы кода.

Структурные аспекты являются скелетами, которые позволяют создавать конструкции, известные как объекты. Эти объекты являются просто шаблонами дизайна, на которые еще ничего не нанесено. Мы абстрагируем конструкцию от набора компонентов с целью получения обобщенного объекта.

После этого мы опционально добавляем к нашей конструкции слой оболочки , чтобы иметь возможность придать нашей абстракции определенный вид и ощущение. Например (взято из Руководства по CSS):

/**
* Простой объект кнопки без дизайна. Объект можно дополнить оболочкой `.btn--*` 
* Класс.
*/
.btn {
    display: inline-block;
    padding: 1em 2em;
    vertical-align: middle;
}
/**
* Оболочка положительных кнопок. Дополняет `.btn`.
*/
.btn--positive {
    background-color: green;
    color: white;
}
/**
* Оболочка отрицательных кнопок. Дополняет `.btn`.
*/
.btn--negative {
    background-color: red;
    color: white;
}

Здесь мы видим, как класс .btn просто вносит структуру в элемент, но еще не содержит косметики. Мы можем дополнить .btn вторым классом, например, .btn--positve, чтобы придать этому элементу более определенный стиль:

<button class=\"btn  btn--positive\">OK</button>

Предпочтительно использовать в HTML несколько классов, в дополнение к использованию чего-то вроде @extend в препроцессоре. Это дает лучшую видимость в HTML, что позволяет быстрее увидеть, какие классы применяются к элементу. Это также гарантирует, что классы не связаны с другими стилями в CSS. Это помогает OOCSS придерживаться концепции инкапсуляции.

БЭМ

БЭМ (Блок, Элемент, Модификатор) это методология создания интерфейса, разработанная в Yandex. БЭМ на самом деле является довольно обширной методологией, и я, честно говоря, еще не изучил все детали, но меня заинтересовало соглашение о присвоении имен.

БЭМ разделяет классы на три группы

• Блок: источник или основа компонента
  
  • Элемент: компонент внутри блока
    
  • Модификатор: вариант или расширение блока

Очень базовая аналогия (не пример):

.dog {}
.dog__tail {}
.dog--small {}

Элементы ограничены двумя нижними подчеркиваниями (\\), а модификаторы ограничены двумя дефисами (--).

В вышеприведенной аналогии мы видим, что .dog это блок, источник элемента. Далее, dog\\tail это элемент, меньшая часть блока .dog. И последнее, .dog--small это модификатор, определенный вариант блока .dog. Также вы можете применять модификаторы к элементам. Например, мы можем сделать .dog\_tail--short, чтобы указать вариант элемента dog\_tail.

Препроцессоры

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

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

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

Есть несколько препроцессоров, но самые распространенные - это LESS и SASS. Ознакомьтесь с ними и подумайте о том, чтобы добавить их в свой рабочий процесс, и вы не пожалеете.

Заключение

Все может быть лучше. Многие утверждают, что В CSS нет семантики, это не совсем так. CSS, без сомнений, может быть семантическим на все 100%, именно использование OOCSS и БЭМ делает его таким. Это не значит, что это просто, но это правда стоит того, чтобы попробовать. Добавьте к этому препроцессоры CSS, и вы получите возможность создавать очень читабельные, обслуживаемые и настраиваемые стили.Также стоит отметить, что это не только делает ваш CSS (с препроцессором или без) более читабельными, но еще и делает более читабельным ваш HTML, присваивая семантические имена классов элементам.

Подведем итог:

• Каждый класс делает что-то одно и делает это хорошо и правильно;
  
  • Блок, Элемент, Модификатор (БЭМ) имена стилей классов: Блок: .grid; Элемент: .grid__item (2 нижних подчеркивания); Модификатор : .grid--wide (2 дефиса).
    
  • Препроцессоры это круто.