В данной статье рассматривается структурный подход к организации CSS кода. Стоит сказать, что это лишь один из методов, которые мы применяем. Все зависит от масштаба проекта и возраста. Примеров организаций множество. Вот некоторые из них: БЭМ, OOCSS, SMACSS, Atomic CSS, MCSS, AMCSS, FUN. Каков из методов использовать решать вам.
Мы используем rem как единицу измерения для всех размеров, кроме границ, которые мы определяем как px. rem — для адаптивной верстки, когда задается всему документу шрифт html { font-size: 16px; } и от него отталкиваются все размеры (1rem = 16px) , для @media screen and (max-width: 768px) { html { font-size: 12px; } — соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры. Система CSS состоит из следующих компонентов:
- Сброс настроек
- Переменные
- Глобальные настройки проекта
- Конкретные настройки контента
- hover-эффекты
- Медиа-запросы
/* Reset */
...
/* Variables */
...
/* Globals */
...
/* Specifics */
...
/* Hovers */
...
/* Media queries */
...Сброс настроек
Каждый браузер предоставляет HTML-код в предварительно отформатированном виде, если вы не определяете стиль самостоятельно. Эта таблица стилей по умолчанию разработана по-разному в зависимости от производителя и версии браузера. Чтобы сбросить этот стиль для всех браузеров и унифицировать отображение, мы используем первоначальный сброс.
/* Reset */
*,*::before,*::after{
box-sizing:border-box;
}
html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,
pre,form,fieldset,input,textarea,p,blockquote,th,td,
header,footer,aside,nav,article,figure,figcaption{
margin:0;
padding:0;
}
fieldset,img{
border:0;
}
address,caption,cite,code,dfn,em,strong,th,var{
font-style:normal;
font-weight:400;
}
ol,ul{
list-style:none;
}
caption,th{
text-align:left;
}
h1,h2,h3,h4,h5,h6{
font-size:100%;
font-weight:400;
}
q:before,q:after{
content:'';
}
abbr,acronym{
border:0;
}
a{
text-decoration:none;
}
a:active,a:focus{
outline:none;
} Переменные
Современные браузеры (привет internet explorer) давно поддерживают переменные, поэтому мы с удовольствием будем использовать их в своих проектах.
Для всех спецификаций абсолютного размера для ширины и размеров шрифта веб-сайта, с которым мы работаем — rem. Чтобы упростить расчет, установим font-size в корне 10px, которое соответствует 1rem. Таким образом, основной текст с размером шрифта 20px будет 2rem по определению.
Определяем базовые цвета, черный и белый, в отдельном блоке. Сразу под ним все цвета проекта.
/* Variables */
:root{
/* Reset 1rem = 10px */
font-size:10px;
/* Basic colors */
--white:#ffffff;
--black:#000000;
...
/* Project colors */
--yellow:hsl(57,88%,58%);
--blue:hsl(220,88%,58%);
...
/* Layout variables */
--content-width:90rem;
--content-padding:5rem;
...
--header-height:10rem;
--keyvisual-height:60rem;
...
}Глобальные настройки проекта
В глобальных настройках проекта мы устанавливаем базовые правила типографики и унифицируем интервалы.
В большинстве случаев нашим сайтам не требуется более четырех размеров заголовков для осмысленной иерархической организации контента.
/* Globals */
body{
font-family:sans-serif;
font-size:2rem;
font-weight:400;
line-height:1.4;
}
section{
padding:var(--content-padding);
}
p,ul,figure{
margin-bottom:3rem;
}
h1,h2,h3,h4,h5,h6{
line-height:1.1;
}
h1{
font-size:4rem;
margin-bottom:3rem;
}
h2{
font-size:3rem;
margin-bottom:2rem;
}
h3{
font-size:2.5rem;
margin-bottom:1.5rem;
}
h4{
font-size:2.2rem;
font-weight:700;
}Конкретные настройки контента
Конкретный раздел этой системы CSS всегда самый подробный. Здесь мы определяем конкретный дизайн контента, напрямую обращаясь к разделам. В разделе придерживаемся иерархического порядка определений.
/* Specifics */
/* Intro */
section.intro{
background-color:var(--blue);
color:var(--white);
}
section.intro h3{
margin-bottom:0;
}
section.intro figure{
border:1px solid var(--yellow);
}
/* Contact */
section.contact{
background-color:var(--black);
color:var(--white);
}
section.contact h2{
margin-bottom:2rem;
}
section.contact figure{
border:1px solid var(--white);
}
Hover-эффекты
Мы собираем все определения наведения в центральном месте и связываю их с медиа-запросом @media(hover:hover), потому что наведение необходимо только для устройств с поддержкой наведения.
Таким образом мы отслеживаем все hover и можем быстро их находить и настраивать.
/* Hovers */
@media(hover:hover){
header nav ul li a:hover{
background-color:var(--yellow);
}
section p a.button:hover{
background-color:var(--yellow);
color:var(--black);
}
...
}Медиа-запросы
Мы разрабатываем 90% сайтов для настольных компьютеров и настраиваем все определения адаптивного дизайна в порядке убывания: рабочий стол → планшет → смартфон.
Путем привязки к корневому значению font-size можем грамотно масштабировать весь макет пропорционально.
/* Media Queries */
/* Standard desktop */
@media(max-width:1920px){
:root{
--content-padding:4rem;
}
...
}
/* Old desktop or large scaled UI */
@media(max-width:1280px){
:root{
font-size:8px;
}
...
}
/* Tablet landscape */
@media(max-width:1024px){
:root{
font-size:10px;
--content-width:100%;
--content-padding:2rem;
}
...
}
/* Tablet portrait */
@media(max-width:800px){
:root{
font-size:9px;
}
...
}
/* Smartphones */
@media(max-width:550px){
:root{
font-size:7px;
--content-padding:1rem;
}
...
}Спасибо за чтение! Надеюсь вам помогла статья и навела на интересные размышления. Мы были бы рады если бы вы поделились ими в комментариях.
