От автора: за 20 лет опыта веб-разработки я создал для себя стандартный подход CSS, которым я хотел бы поделиться в этой статье. В этом примере показан мой структурный подход, а не дизайн. Таким образом, статья не является визуальным шаблоном и не имеет дизайна.
В общем, я использую rem как единицу измерения для всех размеров, кроме границ, для которых я использую px. Моя система CSS состоит из следующих компонентов:
Сброс настроек
Переменные
Глобальные настройки
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Специфические настройки
Стили наведения
Медиа-запросы
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
/* Reset */ ... /* Variables */ ... /* Globals */ ... /* Specifics */ ... /* Hovers */ ... /* Media queries */ ... |
Сброс настроек
Каждый браузер предоставляет HTML-код в предварительно отформатированном виде, если вы не определяете стиль самостоятельно. Эта таблица стилей по умолчанию разработана по-разному в зависимости от производителя и версии браузера. Чтобы сбросить стиль по умолчанию для всех браузеров и унифицировать отображение, я использую первоначальный сброс.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
/* 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.
Я определяю базовые цвета, черный и белый, в отдельном блоке. Сразу под ним все другие цвета проекта. В переменных макета раздела я определяю все важные переменные макета, такие как content-width, content-padding, header-height и т.д.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
/* 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 также является промежуточным заголовком, который не имеет отступа вниз но выделен жирным.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
/* 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 всегда самый подробный. Здесь я определяю конкретный дизайн контента, напрямую обращаясь к разделам. В этом разделе я придерживаюсь иерархического порядка определений.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/* 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 и могу быстро их находить и настраивать.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
/* 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 я могу грамотно масштабировать весь макет пропорционально.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
/* 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.
Профессия Frontend-разработчик PRO
Готовим Frontend-разработчиков с нуля
На курсе вы научитесь создавать интерфейсы веб-сервисов с помощью языков программирования и дополнительных технологий. Сможете разрабатывать планировщики задач, мессенджеры, интернет-магазины…
Читайте нас в Telegram, VK, Яндекс.Дзен
