Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

2 <h2>Содержание</h2>

3 <ul><li><a>Для чего нужен CSS</a></li>

4 <li><a>Подключение стилей CSS</a></li>

5 <li><a>Как устроены таблицы стилей</a></li>

6 <li><a>Методология CSS</a></li>

7 <li><a>Кто и как работает с CSS-кодом</a></li>

8 </ul><h2>Для чего нужен CSS</h2>

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

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

11 <ol><li>HTML - язык разметки. Это своеобразный "чертеж" страницы. На HTML прописывают структуру: заголовки, ссылки, текст;</li>

12 <li>CSS - код, отвечающий за визуальную часть страницы. Он нужен для того, чтобы на сайте были удобные кнопки, разные цвета и графика, а не только голый текст. Частично такие задачи можно решить и через HTML, но это будет очень долго и неудобно;</li>

13 <li>JavaScript - язык программирования, на основе которого работают интерактивные элементы. Например, всплывающие формы, автозапуск видео или аудио, графика и т.д.</li>

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

15 </blockquote><h3>История CSS</h3>

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

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

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

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

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

21 <p>А теперь разберем подробнее, как работает CSS.</p>

22 <h2>Подключение стилей CSS</h2>

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

24 <p>Это делают тремя способами:</p>

25 <ol><li>Прописывают в тэге style. Это удобно, когда речь идет о небольшой странице. Если же файл HTML много весит, то с таким подходом страница будет загружаться очень долго. А самое главное, это мешает масштабированию. Разработчику нужно будет прописывать содержимое тэга на каждой странице сайта;</li>

26 <li>Создать отдельный файл .css, на который ставят ссылку в HTML-документе. Преимущества такого способа в универсальности. Файл создают один раз, а потом применяют ко всем страницам. К тому же он сохраняет себя в кэше, поэтому при повторном посещении страницы она загружается гораздо быстрее;</li>

27 <li>Использовать инлайн-стили, добавляя к отдельным элементам атрибут style. Они имеют максимальный приоритет, но об этом мы расскажем ниже.</li>

28 </ol><h2>Как устроены таблицы стилей</h2>

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

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

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

32 <ul><li>Селектора - специальной метки, которая помогает браузеру понять, где именно в документе применять тот или иной параметр.</li>

33 <li>Свойства - говорят, что конкретно нужно изменить. Например, свойство color - это цвет.</li>

34 <li>Значения - само изменение. Например, название цвета или размер шрифта.</li>

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

36 <ul><li>Селектор - заголовок Н1.</li>

37 <li>Свойство - color.</li>

38 <li>Значение - конкретный цвет, зеленый в нашем случае - #008000.</li>

39 </ul><p>Для этого нужно написать такой код:</p>

40 <p>H1 { color: #008000; }</p>

41 <h3>Иерархия</h3>

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

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

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

45 <p>В целом приоритеты в CSS выглядят так:</p>

46 <ol><li>Свойства с пометкой "!important" - имеют абсолютный приоритет, но считается плохой практикой и используется в редких случаях;</li>

47 <li>Заданные через инлайн;</li>

48 <li>Стили в тэге style в документе;</li>

49 <li>Стили, подключенные через внешний файл с расширением .css.</li>

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

51 <h3>Layout</h3>

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

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

54 <h3>Bootstrap</h3>

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

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

57 <h2>Методология CSS</h2>

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

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

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

61 <h3>Atomic CSS</h3>

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

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

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

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

66 <h3>SMACSS</h3>

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

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

69 <p>В этой методологии есть несколько категорий:</p>

70 <ol><li>Base - отвечает за внешний вид элементов по умолчанию. К ней относятся смежные селекторы, а также псевдоклассы или атрибуты;</li>

71 <li>Module - модуль или повторные части оформления. Например, блок поиска, меню, всплывающие окна;</li>

72 <li>Theme - стиль модуля и макета;</li>

73 <li>Layout - стиль, применяющийся для разделения веб-документа на секции;</li>

74 <li>State - стиль внешнего вида в определенном состоянии. Например, домашняя страница, видимый, скрытый или раскрытый вид страницы.</li>

75 </ol><p>Методология определяет, как правильно давать имена всем этим категориям. Например, модулям надо давать имена компонентов, категориям State - имена с префиксом "is-", категориям Layout - с префиксом "layout-" и т.д.</p>

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

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

78 <h3>OOCSS</h3>

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

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

81 <p>В OOCSS есть две основные сущности:</p>

82 <ol><li>Стили структуры - все, что относится к размещению контента на странице. Например, отступы, высота, ширина и т.д. Структура - это то, что влияет на расположение.</li>

83 <li>Стили оформления - шрифты, фон, границы. В общем все, что видят пользователи, когда приходят на страницу. Оформление влияет на то, как выглядят элементы.</li>

84 </ol><p>На основе этого создают отдельные классы. Например, для изменения структуры кнопок нужно использовать один класс, а для изменения оформления - другой.</p>

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

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

87 <h3>CSS-in-JS</h3>

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

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

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

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

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

93 <h3>БЭМ</h3>

94 <p>Ее создали в "Яндексе" для упрощения процесса веб-разработки. БЭM основан на трех сущностях:</p>

95 <ul><li>Блок - независимый компонент, чья задача описывать отображение элементов. Один блок может содержать в себе другие блоки. Например, блоком будет футер или хэдер сайта. Его название должно описывать значение, а не состояние.</li>

96 <li>Элемент - сущность, используемая только внутри блока, его составная часть. Он может быть вложенным и не принадлежащим другим элементам. Название элемента описывает значение, а не внешний вид.</li>

97 <li>Модификатор - используют для описания атрибута элемента или блока. Он отвечает за поведение, положение или состояние.</li>

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

99 <h2>Кто и как работает с CSS-кодом</h2>

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

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

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

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

104 </blockquote>