Языки стилей - CSS и препроцессоры

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВ

Разработчику Аналитику Архитектору

Языки стилей

Style Sheet Languages

Языки стилей (Style Sheet Languages) определяют внешний вид и оформление содержимого, описанного на языке разметки.

Стиль регулирует цвет текста, размер шрифта, расположение на странице, рамки, тени, отступы, поведение при наведении. Если разметка лишь определяет структуру - заголовки, абзацы, списки, то стиль определяет, что заголовок будет именно синим, увеличенным и расположенным по центру с желтым фоном. Это как расширение разметки за счёт добавления визуального оформления.

В реальных проектах стили решают больше задач, чем "сделать красиво":

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

Связка технологий

Стили читаются вместе с разметкой и скриптами — языки разметки, JavaScript, TypeScript.

CSS

CSS (Cascading Style Sheets) – язык таблиц стилей, определяющий внешний вид и оформление документов, написанных на языках разметки, таких как HTML. Дата создания — 1996 год. Основными особенностями являются каскадность, поддержка селекторов, модульное развитие через версии CSS2, CSS3 и т. д. Работает в браузерах. Применяется в веб-разработке для оформления сайтов и приложений. Один из ключевых технологий современного интернета.

Каскадность и специфичность селекторов определяют, какое правило "победит". Это центральная идея CSS, из которой растут и гибкость, и типичные ошибки. Для устойчивых проектов применяют архитектурный подход — BEM, CSS Modules, utility-first (см. Tailwind — готовые блоки) или дизайн-системы.

h1 {
    color: #333;
    font-size: 24px;
    margin-bottom: 16px;
}

Sass / SCSS

Sass / SCSS – препроцессор CSS, добавляющий переменные, вложенные правила, миксины и другие удобства. Sass создан в 2006 году, SCSS — это его синтаксический вариант с совместимостью CSS. Основными особенностями являются расширяемость, поддержка условий и функций. Работает через компиляцию в обычный CSS. Применяется в масштабных проектах для упрощения управления стилями. Широко используется в профессиональной фронтенд-разработке.

В крупных командах SCSS помогает вынести повторяющиеся решения в миксины и токены темы. Это снижает количество дублей и делает интерфейс предсказуемым при изменениях.

$primary-color: #007BFF;

.card {
    border: 1px solid #ddd;
    border-radius: 8px;
    
    &__title {
        color: $primary-color;
        font-weight: bold;
    }
}

LESS

LESS – ещё один препроцессор CSS, предоставляющий переменные, миксины, операции и вложенные правила. Дата создания — 2009 год. Основными особенностями являются JavaScript-базовая реализация, простота освоения, интеграция с популярными фреймворками. Работает через интерпретатор или компилятор. Применяется в веб-проектах, где нужна гибкость стилей. Популярен среди разработчиков, особенно в сочетании с Bootstrap.

@link-color: #1a73e8;

a {
    color: @link-color;
    
    &:hover {
        color: darken(@link-color, 10%);
    }
}

Stylus

Stylus – гибкий препроцессор CSS с минимальным синтаксисом и мощными возможностями. Дата создания — 2010 год. Основными особенностями являются отсутствие необходимости в скобках и точках с запятой, поддержка JavaScript-выражений. Работает через компиляцию. Применяется в небольших и средних веб-проектах, где важна скорость написания кода и читаемость. Менее популярен, чем Sass или LESS, но остаётся актуальным в нишевых проектах.

primary = #0056b3

button
    padding 10px 15px
    background-color primary
    border none
    rounded()
        border-radius 4px
    rounded()

XSLT

XSLT (Extensible Stylesheet Language Transformations) – язык преобразования XML-документов, в том числе в HTML и другие форматы. Дата создания — 1999 год. Основными особенностями являются работа с деревом XML, шаблонная система, использование XPath. Работает через XSLT-процессоры. Применяется в системах обработки данных, документообороте, legacy-веб-приложениях. Используется там, где нужно конвертировать XML в представимый формат.

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

<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:template match="/">
        <html>
            <body>
                <h2>Список книг</h2>
                <ul>
                    <xsl:for-each select="catalog/book">
                        <li><xsl:value-of select="title"/></li>
                    </xsl:for-each>
                </ul>
            </body>
        </html>
    </xsl:template>
</xsl:stylesheet>

FXML

FXML – язык разметки пользовательского интерфейса для JavaFX. Дата появления — 2008 год. Основными особенностями являются декларативное описание UI, связь с контроллерами на Java, поддержка стилей и анимаций. Работает в экосистеме JavaFX. Применяется в настольных Java-приложениях для создания графического интерфейса. Альтернатива программному созданию UI в Java.

<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox xmlns="http://javafx.com/javafx">
    <Label text="Добро пожаловать!" />
    <Button text="Нажми меня" onAction="#handleButtonClick" />
</VBox>

Практический минимум по CSS для старта

1) Как подключить CSS к странице

внешний файл в <head>: <link rel="stylesheet" href="styles.css">;
встроенный блок <style> для быстрых экспериментов;
inline-стили через атрибут style полезны только для редких точечных случаев.

Для командной разработки основной вариант — внешний файл: его удобно версионировать, переиспользовать и ревьюить.

2) Как находить элементы и выбирать селекторы

селектор по тегу — h1, p, button;
селектор по классу: .card, .btn-primary;
селектор по id: #main-header;
вложенные селекторы: .card .title;
селекторы состояний — a:hover, input:focus, button:disabled.

Минимальное правило устойчивого кода — сначала классы, затем контекстные селекторы, точечный id только там, где он действительно нужен.

.product-card .title {
    font-size: 20px;
    font-weight: 600;
}

3) Цвета и контраст

HEX: #1a73e8;
RGB/RGBA — rgb(26, 115, 232), rgba(26, 115, 232, 0.8);
HSL для удобной работы с оттенком и насыщенностью;
CSS-переменные для единой палитры.

:root {
    --color-primary: #1a73e8;
    --color-text: #1f2937;
    --color-bg: #ffffff;
}

4) Шрифты и читаемость

семейство шрифтов: font-family;
размер: font-size;
межстрочный интервал: line-height;
толщина: font-weight.

Для текста полезно держать акцент на читаемости, а не на "декоративности" — удобный размер, достаточный контраст, предсказуемая типографика.

5) Позиционирование и расположение

поток документа: display: block | inline | inline-block;
flex-контейнеры для строк и колонок;
grid для сложных сеток;
position: relative | absolute | fixed | sticky и z-index.

.layout {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
}

6) Блочная модель и отступы

margin — внешний отступ;
padding — внутренний отступ;
border — рамка;
box-sizing: border-box — предсказуемый расчёт ширины и высоты.

7) Адаптивность и состояния

медиазапросы для экранов и устройств;
состояния интерактивных элементов — :hover, :focus, :active, :disabled;
проверка клавиатурной навигации и фокус-стилей.

8) Что обычно ломается у новичков

слишком "тяжёлые" вложенные селекторы;
хаотичные значения цветов и отступов без единой системы;
злоупотребление !important;
отсутствие адаптивности и фокус-состояний;
смешение структуры (HTML), поведения (JS) и оформления (CSS) в одном месте.

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

Языки стилей - CSS и препроцессоры