CSS, как ни странно, считается одновременно одним из самых простых и одним из самых сложных языков для изучения веб-разработчиком. Начать с этим, конечно, достаточно просто — вы определяете свойства стиля и значения для применения к определенным элементам, и … это практически все, что вам нужно для начала работы! Однако организация CSS осмысленным образом для более крупных проектов становится запутанной и сложной. Изменение любой строки CSS для оформления элемента на одной странице часто приводит к непреднамеренным изменениям элементов на других страницах.
Для того, чтобы справиться со сложностью, присущей CSS, были созданы всевозможные лучшие практики. Проблема в том, что нет какого-либо сильного консенсуса в отношении того, какие лучшие практики на самом деле являются лучшими, и многие из них, похоже, полностью противоречат друг другу. Если вы пытаетесь изучить CSS впервые, это может, по меньшей мере, дезориентировать.
Цель этой статьи — предоставить исторический контекст того, как подходы и инструменты CSS эволюционировали до того, какими они являются сегодня, в 2018 году. Понимая эту историю, вам будет легче понять каждый подход и то, как использовать их в своих интересах. Давайте начнем!
Использование CSS для базового стиля
Давайте начнем с базового веб-сайта, используя простой index.html файл, который ссылается на отдельный index.css файл::
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Modern CSS</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<header>This is the header.</header>
<main>
<h1>This is the main content.</h1>
<p>...</p>
</main>
<nav>
<h4>This is the navigation section.</h4>
<p>...</p>
</nav>
<aside>
<h4>This is an aside section.</h4>
<p>...</p>
</aside>
<footer>This is the footer.</footer>
</body>
</html>
Прямо сейчас мы не используем никаких классов или идентификаторов в HTML, только семантические теги. Без какого-либо CSS веб-сайт выглядит так (с использованием текста-заполнителя):
Функциональный, но не очень красивый. Мы можем добавить CSS, чтобы улучшить базовую типографику в index.css:
/* BASIC TYPOGRAPHY */
html {
font-size: 62.5%;
font-family: serif;
}
body {
font-size: 1.8rem;
line-height: 1.618;
max-width: 38em;
margin: auto;
color: #4a4a4a;
background-color: #f9f9f9;
padding: 13px;
}
@media (max-width: 684px) {
body {
font-size: 1.53rem;
}
}
@media (max-width: 382px) {
body {
font-size: 1.35rem;
}
}
h1, h2, h3, h4, h5, h6 {
line-height: 1.1;
font-family: Verdana, Geneva, sans-serif;
font-weight: 700;
overflow-wrap: break-word;
word-wrap: break-word;
-ms-word-break: break-all;
word-break: break-word;
-ms-hyphens: auto;
-moz-hyphens: auto;
-webkit-hyphens: auto;
hyphens: auto;
}
h1 {
font-size: 2.35em;
}
h2 {
font-size: 2em;
}
h3 {
font-size: 1.75em;
}
h4 {
font-size: 1.5em;
}
h5 {
font-size: 1.25em;
}
h6 {
font-size: 1em;
}
Здесь большая часть CSS — это стилизация типографики (шрифты с размерами, высотой строки и т.д.), С некоторым оформлением цветов и центрированным макетом. Вам нужно было бы изучить дизайн, чтобы знать правильные значения для каждого из этих свойств (эти стили взяты из sakura.css), но сам CSS, который здесь применяется, не слишком сложен для чтения. Результат выглядит примерно так:
Какая разница! Это обещание CSS — простой способ добавления стилей в документ, не требующий программирования или сложной логики. К сожалению, все становится сложнее, когда мы используем CSS не только для типографики и цветов (что мы рассмотрим далее).