Правильный и эффективный CSS. Организация

6 примеров того, как лучше всего структурировать CSS и реализовать его эффективную организацию. Работа с препроцессорами

Даже если вы только осваиваете CSS, наверняка уже столкнулись с вопросом его эффективной организации. Как известно уже, исходя из названия самих стилей, CSS способ структуризации таблиц – каскадный. Другими словами, то, что пишется в начале, влияет на дальнейшую структуру. Однако, по необходимости, всё можно переопределить. Такой метод оправдывал себя в конце 90-х, в начале 2000-х, когда большинство сайтов являлись статическими и обладали несложной структурой.

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

Если вы новичок в CSS, которому предстоит работа в крупном проекте – наша статья поможет разобраться, с помощью 6 алгоритмов, позволяющих оптимально упорядочить CSS.

Применение препроцессоров в CSS

Практически любой учебник по CSS начинается с раздела о препроцессорах. Именно они дают возможность скомпоновать всё в единый CSS. Не безызвестен тот факт, что большое количество CSS файлов увеличивает объем HTTP запросов браузера, что, в свою очередь негативным образом отражается на скорости загрузки. При этом, правило @import в стандартном CSS влечет за собой аналогичную проблему.

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

Отдельные CSS файлы для конкретных страниц

Создавать отдельный CSS файл для той или иной страницы – отличное решение во многих случаях. Чаще всего подобный способ актуален на сайтах, где много страниц с отличными друг от друга макетами. В таком случае, отпадёт необходимость подгружать не используемые CSS файлы, что, в свою очередь повысит производительность. Например, для создания страницы «О сайте» создайте отдельный файл about.css, чтобы не пришлось подгружать те стили, которые не будут использованы именно в этом разделе.

CSS для сложных и повторяемых модулей


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

Максимально разбивайте файл

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

Метод, о котором идет речь, называют «Атомная конструкция». Принцип его действия заключается в группировке элементов дизайна с помощью 5 классов:

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

Атом – элементы навигации (текстовые блоки, кнопки и т.д.).
Молекулы – определенная форма, в состав которой входит кнопка и поле для ввода.
Организмы – совокупность некоторого количества «молекул». Например, заголовок страницы или подзаголовки являются «организмами».

Применимо к CSS, такая классификация позволяет переходить в написании кода от простейшего к наиболее сложному. Самым простым является написание CSS для «атомов». Далее следует продолжить работу над стилями различных форм. После чего можно приступать к стандартной типографии. И в завершении, появится возможность составлять индивидуальные таблицы стилей для «организмов» и «страниц».

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

Минимизируйте использование классов с единичным условием Class-it is

По сути, Class-itis является своеобразным «заболеванием», вынуждающим применять class=атрибут, являющийся style=атрибут. Таким образом, повторяются ошибки, популярные в периоды применения табличной верстки. В качестве примера, будет уместным следующее:

[Insert content here]

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

Уменьшайте уровень вложенности

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


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

Здесь можно отметить своеобразную нестандартность CSS, в виду того, что он довольно сильно влияет на другие фрагменты структуры. Кроме того, сам файл CSS является некорректным.

Гораздо проще использовать следующее:


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

Важно соблюдать разумный баланс между избыточным количеством классов и явным дефицитом.

Эпилог

Мы собрали для вас 6 примеров того, как лучше всего структурировать CSS, однако вышеуказанные методы не являются истиной в последней инстанции. В наши дни, темпы развития Frontend разработки довольно велики. Не секрет, что новые методологии приходят на место устаревших едва ли каждые несколько недель. Однако, используя вышеприведенные варианты, вам удастся создавать чистый и удобный в чтении код, который может стать вашей «визитной карточкой» увеличив вашу профессиональную значимость на рынке труда.

Будем рады увидеть ваше мнение о статье в комментариях ниже. Спасибо за внимание!

Также мы предлагаем Вам:

Сделать красивый код CSS

Comments