03.12.2021

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

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

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

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

Сброс настроек

Переменные

Глобальные опции

Специфические настройки

Стили наведения

Медиа-запросы

CSS

Сброс опций

Каждый браузер предоставляет HTML-код в за ранее отформатированном виде, если вы не определяете стиль без помощи других. Эта таблица стилей по умолчанию разработана по-разному в зависимости от производителя и версии браузера. Чтоб сбросить стиль по умолчанию для всех браузеров и унифицировать отображение, я использую начальный сброс.

CSS

Переменные

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

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

CSS

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

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

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

CSS

Специальные настройки

Специфический раздел моего CSS всегда самый подробный. Тут я определяю конкретный дизайн контента, впрямую обращаясь к разделам. В этом разделе я придерживаюсь иерархического около определений.

CSS

Hovers

Я собираю все определения hover в одном месте и связываю их медиа-запросом @media(hover:hover), поэтому что hover необходимо только для устройств с поддержкой hover. Таким образом я отслеживаю все hover и могу стремительно их находить и настраивать.

CSS

Медиа-запросы

В 90% случаев, я разрабатываю для настольных компов и определяю все определения адаптивного дизайна в порядке убывания: рабочий стол — планшет — телефон. Путем привязки к корневому значению font-size я могу хорошо масштабировать весь макет пропорционально.

CSS

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

По материалам webformyself.com

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *