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

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

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

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

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

Переменные

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Переменные

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

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

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

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

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

Hovers

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

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

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

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

Автор: Stephan Romhart

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

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Верстка. Быстрый старт

Практический курс по верстке адаптивного сайта с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии запрещены.