Что такое CSS

CSS — это каскадные таблицы стилей, которые используют для оформления веб-страниц. Это базовый навык для фронтендера, наряду с HTML и JavaScript. Расскажем о нем подробнее.

Для чего нужен CSS

На заре интернета сайты были максимально простыми и лаконичными. Многие из вас учились создавать их на основе HTML на уроках информатики. А потом появился CSS (аббревиатура от английского Cascading Style Sheets — каскадные таблицы стилей). Так у веб-страниц появилось оформление: отдельные блоки, шрифты, цвета и т.д.

Современные сайты состоят из фронтенда — пользовательского интерфейса, и бэкенда — внутренней логики. Чтобы написать фронтенд разработчики используют три основных инструмента:

1. HTML — язык разметки. Это своеобразный «чертеж» страницы. На HTML прописывают структуру: заголовки, ссылки, текст;
2. CSS — код, отвечающий за визуальную часть страницы. Он нужен для того, чтобы на сайте были удобные кнопки, разные цвета и графика, а не только голый текст. Частично такие задачи можно решить и через HTML, но это будет очень долго и неудобно;
3. JavaScript — язык программирования, на основе которого работают интерактивные элементы. Например, всплывающие формы, автозапуск видео или аудио, графика и т.д.

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

История CSS

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

Уже в середине 90-х его функционал был исчерпан. К тому же на рынке появилось несколько браузеров, у каждого из которых были свои стили, что создавало проблемы для верстки. Не все они одинаково отображали одни и те же тэги.

Тогда появился новый стандарт CSS. Первоначально он мог только выравнивать текст и устанавливать цвет. Но в 1998 году выпустили стандарт CSS2 и это стало сенсацией.

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

Именно CSS позволил создавать полноценную верстку веб-страниц и компоновать сайт на основе заданных элементов. Название этому процессу дали по аналогии с версткой газетных страниц.

А теперь разберем подробнее, как работает CSS.

Подключение стилей CSS

Каркас веб-страницы — HTML-документ, его код задает основные элементы. А CSS позволяет их оформить.

Это делают тремя способами:

1. Прописывают в тэге style. Это удобно, когда речь идет о небольшой странице. Если же файл HTML много весит, то с таким подходом страница будет загружаться очень долго. А самое главное, это мешает масштабированию. Разработчику нужно будет прописывать содержимое тэга на каждой странице сайта;
2. Создать отдельный файл .css, на который ставят ссылку в HTML-документе. Преимущества такого способа в универсальности. Файл создают один раз, а потом применяют ко всем страницам. К тому же он сохраняет себя в кэше, поэтому при повторном посещении страницы она загружается гораздо быстрее;
3. Использовать инлайн-стили, добавляя к отдельным элементам атрибут style. Они имеют максимальный приоритет, но об этом мы расскажем ниже.

Как устроены таблицы стилей

CSS называют каскадными таблицами стилей. Из названия следуют и правила, по которым пишут код разметки.

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

Стили или параметры оформления. Их еще называют “правила”. Стиль состоит из:

• Селектора — специальной метки, которая помогает браузеру понять, где именно в документе применять тот или иной параметр.
• Свойства — говорят, что конкретно нужно изменить. Например, свойство color — это цвет.
• Значения — само изменение. Например, название цвета или размер шрифта.

Например, если мы хотим, чтобы текст заголовков был зеленым, нам потребуется:

• Селектор — заголовок Н1.
• Свойство — color.
• Значение — конкретный цвет, зеленый в нашем случае — #008000.

Для этого нужно написать такой код:

H1 {

color: #008000;

}

Иерархия

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

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

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

В целом приоритеты в CSS выглядят так:

1. Свойства с пометкой «!important» — имеют абсолютный приоритет, но считается плохой практикой и используется в редких случаях;
2. Заданные через инлайн;
3. Стили в тэге style в документе;
4. Стили, подключенные через внешний файл с расширением .css.

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

Layout

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

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

Bootstrap

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

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

Методология CSS

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

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

Одной общей методологии CSS не существуют. Есть несколько конкурирующих стандартов: какие-то из них используют редко, считая устаревшими, а какие-то — часто.

Atomic CSS

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

Согласно Atomic CSS, классы нужно комбинировать в самом блоке HTML. За счет этого верстать становится проще, так как разработчик использует универсальные коллекции стилей.

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

Принципы Atomic CSS используют в нескольких фреймворках. Например, в Bootstrap и Tailwind.

SMACSS

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

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

В этой методологии есть несколько категорий:

1. Base — отвечает за внешний вид элементов по умолчанию. К ней относятся смежные селекторы, а также псевдоклассы или атрибуты;
2. Module — модуль или повторные части оформления. Например, блок поиска, меню, всплывающие окна;
3. Theme — стиль модуля и макета;
4. Layout — стиль, применяющийся для разделения веб-документа на секции;
5. State — стиль внешнего вида в определенном состоянии. Например, домашняя страница, видимый, скрытый или раскрытый вид страницы.

Методология определяет, как правильно давать имена всем этим категориям. Например, модулям надо давать имена компонентов, категориям State — имена с префиксом «is-», категориям Layout — с префиксом «layout-» и т.д.

При этом строгих правил об именовании в этой методологии нет. Их нужно создавать индивидуально на проекте, тщательно документировать, а потом придерживаться.

Методологию SMACSS считают достаточно гибкой, простой для понимания и внедрения — ей легко обучить новых сотрудников.

OOCSS

Эта методология называется “объектно-ориентированный CSS”. В ее основе лежит принцип разделения оформления элемента и его структуры.

Она была разработана как ответ на две основные проблемы, которые возникают при создании стилей в CSS: повторение и разный подход к наименованию. Чем больше людей работают над одним проектов, тем больше там появляется разных классов для одинаковых элементов.

В OOCSS есть две основные сущности:

1. Стили структуры — все, что относится к размещению контента на странице. Например, отступы, высота, ширина и т.д. Структура — это то, что влияет на расположение.
2. Стили оформления — шрифты, фон, границы. В общем все, что видят пользователи, когда приходят на страницу. Оформление влияет на то, как выглядят элементы.

На основе этого создают отдельные классы. Например, для изменения структуры кнопок нужно использовать один класс, а для изменения оформления — другой.

Это улучшает стандартизацию, позволяя быстро вносить изменения.

OOCSS предназначен, по большей части, для крупных проектов. При его использовании классы не привязывают к отдельному элементу, поэтому их легко комбинировать. За счет этого повышается универсальность кода.

CSS-in-JS

Эта методология основана на использовании языка программирования JavaScript. Его применяют для разметки в тех случаях, когда стили должны измениться при взаимодействии с пользователем. Например, он может нажать на кнопку и на сайте появится новый блок.

Методология CSS в JS предполагает, что стили нужно прописывать в скриптовых файлах, а не в документах с расширением .css.

Но дело не только в файлах. Сами стили прописывают при помощи JavaScript. На основе этой методологии работают многие популярные фреймворки. Самый простой пример — React. В нем стили задаются через styled-components.

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

CSS-in-JS позволяет создавать отдельные модули, поэтому структура становится проще. При таком раскладе их гораздо легче тестировать, так как модули проверяются отдельно друг от друга.

БЭМ

Ее создали в «Яндексе» для упрощения процесса веб-разработки. БЭM основан на трех сущностях:

• Блок — независимый компонент, чья задача описывать отображение элементов. Один блок может содержать в себе другие блоки. Например, блоком будет футер или хэдер сайта. Его название должно описывать значение, а не состояние.
• Элемент — сущность, используемая только внутри блока, его составная часть. Он может быть вложенным и не принадлежащим другим элементам. Название элемента описывает значение, а не внешний вид.
• Модификатор — используют для описания атрибута элемента или блока. Он отвечает за поведение, положение или состояние.

В рамках этой методологии используют единообразную систему наименований. За счет этого новым разработчикам гораздо проще понять все связи, которые используют в разметке проекта.

Кто и как работает с CSS-кодом

Умение писать и читать код на CSS — базовый навык любого фронтенд-разработчика. В нулевых, когда сайты были простыми, существовала профессия верстальщика. Это специалист, который при помощи HTML и CSS создавал интерфейсы.

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

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

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