Стили записи (форматирование) CSS-кода

Здравствуйте. Этой записью открывается цикл статей, посвященный web-разработке по направлению верстка html/css.

Введение:

В этой статье мы рассмотрим альтернативный стиль записи кода в Css-файлах.

Обычно код css-файлах принято записывается очень просто: классы сгруппированны по разделам страницы , свойства внутри них записаны в столбик одно под другим.

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

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

Применительно к CSS можно попробовать сделать так чтобы на экране помещался код всех элементов одного логического блока (небольшого) , если вы верстаете по БЭМ или подобной методике.

Сейчас мы рассмотрим случай записи нескольких Css-свойств на одной строке.
Это уменьшит объем (высоту) кода одного элемента (а также всего файла) и при правильном группировании чтение свойств в таком виде будет достаточно удобным.

Описание.

Сейчас мы рассмотрим на реальном примере как можно сгруппировать стили селектора.

Свойств у элемента целых десять и это не предел.

Шаг 1.

Сгруппируем свойства по назначению и каждую группу запишем на одной строке:

 

Получим менее объемный и более структурированный кода.

 

Шаг 2.

А что если сделать отступы, показывающие иерархию как в html?
В препроцессорах LESS/SASS это принято, какие могут быть причины не делать так в чистом CSS?
Когда будет видна вложенность элементов станет можно прокручивая файл читать структуру и ориентироваться в коде не прибегая к Ctrl+F И Ctrl+G для того чтобы находить каждый селектор в простыне кода.

Применение:

Предлагаю посмотреть по шагам как изменился наш css.

 

Шаг 1. Группировка свойств.

 

Шаг 2. Иерархия элементов.

 

Итого.

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

Это рекомендация. Вы можете группировать стили по-другому, я раньше писал color вместе с font-, например если занимаетесь разработкой шаблонов где имеют место быть цветовые схемы, background-color, border-color и color можно выделять в отдельную группу.

 

Яндекс.Метрика