6 способов организовать Ваш CSS

И так вы начинаете с CSS, и у вас возникли небольшие проблемы с его организацией. Хорошо, CSS имеет каноничный способ организации, который находится прямо в названии - Каскад. Все, что вы пишете в первую очередь будет влиять на все, что приходит после него; и все это может быть переопределено, когда это необходимо. Это, конечно, основано на идее, что вы строите небольшой, статический HTML сайт в 1998-начале 2000-х годов.

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

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

1. Использовать в CSS-препроцессоры

Почти каждое руководство по организации CSS начинается с этого, и не зря: препроцессор позволяет поместить все в один большой CSS. Да, мы помним, о том что мы только написали выше, но прочтите дальше. Чем больше CSS-файлов на которые вы ссылаетесь в HTML, тем больше HTTP-запросов делает ваш браузер. Это замедляет страницу. По крайней мере, это больше работы для процессора. Правило @import в обычном CSS имеет ту же проблему.

С помощью препроцессора, вы можете разделить ваш CSS на столько различных файлов и папок, сколько вам нужно (подробнее об этом далее), и скомпилировать их все в один файл при сохранении. Это лучшее из двух бед. Мы бы рекомендовали начинать тестовый проект с SASS (на данный момент самый популярный в CSS препроцессор), чтобы почувствовать, как это работает.

2. CSS-Файлы для отдельных страниц

Вот подсказка для небольших сайтов: иметь отдельный CSS-файл для каждой страницы. Это особенно полезно на тех сайтах, где каждая страница имеет другой макет. Простой факт, вам не нужно грузить лишние/ненужные css-файлы, это огромный рост производительности. Работаете на страницк "о нас"? Просто подключите aboutus.css и все. Вам не надо грузить кучу стилей для слайдера или крутых анимированных блоков.

3. CSS-файлы для сложных и повторяющихся компонентов

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

Дело не только в организации кода. Если код для этих элементов остается отдельным и независимым от каких-либо стилей страницы, проще использовать их повторно.

4. Разбейте его дальше

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

Он разбивает элементы дизайна на пять категорий:

Атомы
Молекулы
Организмы
Шаблоны
Страницы

Атомы - отдельные элементы, такие как кнопки, текстовые поля и так далее. В этом примере молекулы - это как бы форма состоящая из поля ввода и кнопки. Организмы представляют собой большую коллекцию молекул, как заголовок страницы, и так далее.

Как это относится к CSS? Вы можете писать свой CSS в используя такое решение: сначала css для атомов. Отдельный файл стилей состоящий из основных стилей для форм. Еще один файл для базовой типографии. Затем можно создавать отдельные таблицы стилей для организмов, и даже для некоторых более сложных молекул.

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

5. Избегайте классов описывающих одно условие (Class-itis)

Что такое Class-itis ? Это страшная болезнь, которая заставляет пользователя использовать class=атрибут который по сути является style=атрибут. Бедные души, страдающие этим заболеванием, в основном повторяют то, что мы делали со стилями во времена табличной верстки. Их код выглядит примерно так:

<div class="red-bg corners-rounded-5px columns-3 height-flexible helpme icantgoonlikethis">[Insert content here]</div>

Очень грустно. И что еще хуже, это заболевание может быть передано некоторым более крупным CSS-структурам, и даже некоторыми методологиями CSS (что является одной из причин, почему мы не обращаемся к ним). Послушайте, независимо от того, какой атрибут вы используете, если вы пишете свои стили в HTML-файлах, вы делаете это неправильно. Это недостижимо, особенно по мере того, как сайты становятся больше.

6. Минимизировать глубину

Теперь мы упоминаем одну методологию CSS которая нам на самом деле нравится: SMACSS. Из методолгоия заключается в таком понятии как глубина применения.

Теперь вы спросите: "что, черт возьми, это значит?" Ну помните, как мы сказали, чтобы вы избегали использования слишком большого кол-ва классов? Но, если вы зайдете слишком далеко и попытаетесь избежать их использования вообще, вы в конечном итоге получите почти нечитаемый беспорядок дублируемых правил CSS, например:

header nav ul, footer nav ul, aside div ul {margin-top: 1rem;}

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

.molecule-Nav {margin-top: 1rem;}

Как вы можете видеть, есть баланс между слишком много классов, и не хватает.

Завершение

Мы привели вам 6 способов организации CSS, мы не заставляем Вас их использовать в точности. В наше время прогресс Front-end разработки очень быстрый, а новоые технологии и методологии появляются почти каждый месяц. Но применяя эти способы Вы можете достичь чистого и читабельного кода, за который вам скажут спасибо :)

Подписывайтесь на наш канал, дальше - больше :)