CSS — это каскадные таблицы стилей, которые используют для оформления веб-страниц. Это базовый навык для фронтендера, наряду с HTML и JavaScript. Расскажем о нем подробнее.
На заре интернета сайты были максимально простыми и лаконичными. Многие из вас учились создавать их на основе HTML на уроках информатики. А потом появился CSS (аббревиатура от английского Cascading Style Sheets — каскадные таблицы стилей). Так у веб-страниц появилось оформление: отдельные блоки, шрифты, цвета и т.д.
Современные сайты состоят из фронтенда — пользовательского интерфейса, и бэкенда — внутренней логики. Чтобы написать фронтенд разработчики используют три основных инструмента:
А если вы хотите стать разработчиком, то приходите на подготовительные курсы Хекслета. В программу включено много теоретических и практических заданий, которые выполняются в браузерном тренажере. Вы изучите основные понятия программирования, научитесь мыслить как разработчики, исправлять ошибки в коде, а еще создадите свою полноценную программу.
Первые сайты в интернете создавали на основе HTML. Они принципиально не отличались от того, что делают дети на информатике. Этот язык разметки был универсальным, но позволял делать сугубо утилитарные веб-страницы.
Уже в середине 90-х его функционал был исчерпан. К тому же на рынке появилось несколько браузеров, у каждого из которых были свои стили, что создавало проблемы для верстки. Не все они одинаково отображали одни и те же тэги.
Тогда появился новый стандарт CSS. Первоначально он мог только выравнивать текст и устанавливать цвет. Но в 1998 году выпустили стандарт CSS2 и это стало сенсацией.
Он поддерживал блочную верстку, механизм селекторов, указатели, а также давал возможность задать свой стиль для каждого устройства. То есть сделать так, чтобы внешний вид сайта подстраивался под размер монитора посетителя.
Именно CSS позволил создавать полноценную верстку веб-страниц и компоновать сайт на основе заданных элементов. Название этому процессу дали по аналогии с версткой газетных страниц.
А теперь разберем подробнее, как работает CSS.
Каркас веб-страницы — HTML-документ, его код задает основные элементы. А CSS позволяет их оформить.
Это делают тремя способами:
CSS называют каскадными таблицами стилей. Из названия следуют и правила, по которым пишут код разметки.
Основой CSS считают стили, то есть визуальное оформление. К ним относятся цвет фона, цвет текста, шрифты, оформление иллюстраций и т.д. У современных сайтов могут быть тысячи страниц, а визуальное оформление на всех одинаковое.
Стили или параметры оформления. Их еще называют “правила”. Стиль состоит из:
Например, если мы хотим, чтобы текст заголовков был зеленым, нам потребуется:
Для этого нужно написать такой код:
H1 {
color: #008000;
}
Код в CSS оформляют в виде каскада. Это ключевое правило сортировки, о котором важно помнить. Оно необходимо, чтобы браузер мог верно интерпретировать код, а пользователь увидел на экране именно то, что хотел разработчик.
В таблицах CSS приоритет отдают правилам, написанным ниже. То есть, если сверху мы написали, что заголовки должны быть зелеными, то ниже можно прописать, что они должны быть красными. И тогда браузер исполнит второе, но не первое.
Этот принцип можно обойти, если прописывать стили не в отдельном документе, а в самом коде страницы при помощи inline. Но его использование считают сомнительной практикой, так как это мешает поддержке продукта.
В целом приоритеты в CSS выглядят так:
Еще один уровень сложности — специфические требования браузеров. Не все из них одинаково отображают код CSS. Таких разночтений немного, но о них нужно помнить.
Одна из важнейших тем в CSS — позиционирование. С его помощью можно располагать разные элементы на веб-странице в заданном порядке. Layout позволяет не делать это вручную, а размечать рабочую область при помощи сетки.
Фактически это набор определенных свойств, который помогает задавать расположение элементов в ячейке и расстояние между этими ячейками.
Это фреймворк для CSS. То есть набор готовых решений, в который входит модульная сетка и набор стилей. Bootstrap дает возможность не изобретать велосипед на каждом проекте, а использовать заготовку.
Bootstrap — это набор компонентов, на основе которых можно собрать внешний вид любого, даже самого сложного сайта. К его достоинствам стоит отнести адаптивность. Он позволяет с легкостью подстраивать верстку под разные устройства и размеры экрана.
Методология — это набор стандартов и правил, по которым разработчики пишут каскадные таблицы стилей. Они необходимы для того, чтобы создавать производительные, масштабируемые и поддерживаемые приложения.
Верстать страницы с CSS без методологии чревато тем, что код будет громоздким, нелогичным и плохо читаемым. А попытки внести в него изменения со стороны приведут к непредсказуемым последствиям.
Одной общей методологии CSS не существуют. Есть несколько конкурирующих стандартов: какие-то из них используют редко, считая устаревшими, а какие-то — часто.
На сегодня это одна из самых популярных методологий. В ее основе лежит принцип создания набора классов. Это специальные инструменты, которые используют для унификации правил.
Согласно Atomic CSS, классы нужно комбинировать в самом блоке HTML. За счет этого верстать становится проще, так как разработчик использует универсальные коллекции стилей.
Atomic CSS уменьшает объем кода, делает его более читабельным и позволяет повторно использовать уже написанные участки. Таким образом, разработка занимает меньше времени. По сути, эта методология диктует создание не одного отдельного интерфейса, а дизайнерской системы.
Принципы Atomic CSS используют в нескольких фреймворках. Например, в Bootstrap и Tailwind.
Эта модульная и масштабируемая методология основана на последовательном подходе к разработке. Чтобы применять ее, нужно разделить правила на категории.
А на базе категорий необходимо разрабатывать шаблоны — наборы готовых элементов в дизайне. Их используют для того, чтобы создать на проекте единые правила разработки CSS-стилей.
В этой методологии есть несколько категорий:
Методология определяет, как правильно давать имена всем этим категориям. Например, модулям надо давать имена компонентов, категориям State — имена с префиксом «is-», категориям Layout — с префиксом «layout-» и т.д.
При этом строгих правил об именовании в этой методологии нет. Их нужно создавать индивидуально на проекте, тщательно документировать, а потом придерживаться.
Методологию SMACSS считают достаточно гибкой, простой для понимания и внедрения — ей легко обучить новых сотрудников.
Эта методология называется “объектно-ориентированный CSS”. В ее основе лежит принцип разделения оформления элемента и его структуры.
Она была разработана как ответ на две основные проблемы, которые возникают при создании стилей в CSS: повторение и разный подход к наименованию. Чем больше людей работают над одним проектов, тем больше там появляется разных классов для одинаковых элементов.
В OOCSS есть две основные сущности:
На основе этого создают отдельные классы. Например, для изменения структуры кнопок нужно использовать один класс, а для изменения оформления — другой.
Это улучшает стандартизацию, позволяя быстро вносить изменения.
OOCSS предназначен, по большей части, для крупных проектов. При его использовании классы не привязывают к отдельному элементу, поэтому их легко комбинировать. За счет этого повышается универсальность кода.
Эта методология основана на использовании языка программирования JavaScript. Его применяют для разметки в тех случаях, когда стили должны измениться при взаимодействии с пользователем. Например, он может нажать на кнопку и на сайте появится новый блок.
Методология CSS в JS предполагает, что стили нужно прописывать в скриптовых файлах, а не в документах с расширением .css.
Но дело не только в файлах. Сами стили прописывают при помощи JavaScript. На основе этой методологии работают многие популярные фреймворки. Самый простой пример — React. В нем стили задаются через styled-components.
Одно из главных достоинств этой методологии — компонентный подход. При разработке обычных стилей в CSS для многих элементов создают отдельные файлы или один общий, но в нем бывает сложно ориентироваться.
CSS-in-JS позволяет создавать отдельные модули, поэтому структура становится проще. При таком раскладе их гораздо легче тестировать, так как модули проверяются отдельно друг от друга.
Ее создали в «Яндексе» для упрощения процесса веб-разработки. БЭM основан на трех сущностях:
В рамках этой методологии используют единообразную систему наименований. За счет этого новым разработчикам гораздо проще понять все связи, которые используют в разметке проекта.
Умение писать и читать код на CSS — базовый навык любого фронтенд-разработчика. В нулевых, когда сайты были простыми, существовала профессия верстальщика. Это специалист, который при помощи HTML и CSS создавал интерфейсы.
Сейчас же простые сайты разрабатывают по готовым шаблонам, а более сложные почти всегда требуют знаний JavaScript. Но CSS никуда не исчез, он остался базой для фронтенда большинства проектов. Просто одного его разработчикам уже недостаточно.
Современный фронтендер должен знать HTML и CSS, уметь писать код на JavaScript и освоить хотя бы один из популярных фреймворков этого языка программирования.
А если вы хотите стать разработчиком, то приходите на подготовительные курсы Хекслета. В программу включено много теоретических и практических заданий, которые выполняются в браузерном тренажере. Вы изучите основные понятия программирования, научитесь мыслить как разработчики, исправлять ошибки в коде, а еще создадите свою полноценную программу.