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

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

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

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

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

Переменные

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

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

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

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

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

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

Переменные

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

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

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

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

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

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

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

Hovers

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

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

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

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

Автор: Stephan Romhart

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

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

Профессия Frontend-разработчик PRO

Готовим Frontend-разработчиков с нуля

На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…

До 10 проектов в портфолио для старта карьеры
Подходит для новичков без опыта в программировании
Практика на вебинарах с разработчиками из крупных компаний

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

Метки:

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

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

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