Как я организую свой CSS для сайтов без фреймворка

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

В общем, я использую rem как единицу измерения для всех размеров, кроме границ, для которых я использую px. Моя система CSS состоит из следующих компонентов:

/* 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;
}

Переменные

Современные браузеры поддерживают переменные, которые я определяю в root элементе. Для всех спецификаций абсолютного размера для ширины и размеров шрифта веб-сайта я работаю с rem. Чтобы упростить расчет, в root я устанавливаю значение font-size равно 10px, которое соответствует 1rem в последующем определении. Таким образом, основной текст с размером шрифта 20px равен 2rem.

Я определяю базовые цвета, черный и белый, в отдельном блоке. Сразу под ним все другие цвета проекта .
В переменных макета раздела I определяю все важные переменные макета, такие как content-width, content-padding, header-height и т.д.

/* 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; ...
}

Глобальные настройки проекта

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

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

/* 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);
} ...

Hovers

Я собираю все определения hover в одном месте и связываю их медиа-запросом @media(hover:hover), потому что 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; } ...
}

Спасибо за чтение!

Автор: Stephan Romhart

Источник: medium.com

Редакция: Команда webformyself.

Читайте нас в Telegram, VK, Яндекс.Дзен