Не используете CSS препроцессоры? А следовало бы.

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

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

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

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

CSS препроцессоры

Что такое CSS препроцессор?

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

Как можно догадаться из названия, CSS препроцессоры принимают текстовый файл, обрабатывают его и выдают корректный CSS-код. Что именно содержит этот текстовый файл, зависит от отдельного препроцессора, но оба, и SASS, и LESS это расширенный CSS.

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

Переменные, миксины, функции

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

Миксины

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

Это поможет вашему CSS коду не повторяться

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

CSS препроцессоры сэкономят ваше время

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

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

Оригинал статьи на английском на сайте WDL

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *