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

0 2

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

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

Переменные

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

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

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

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

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

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

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

CSS /* Reset */ … /* Variables */ … /* Globals */ … /* Specifics */ … /* Hovers */ … /* Media queries */ …

1234567891011121314151617/* Reset */… /* Variables */… /* Globals */… /* Specifics */… /* Hovers */… /* Media queries */…

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

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

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

12345678910111213141516171819202122232425262728293031323334353637383940/* 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 и т.д.

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

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

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

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

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

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

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

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

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

12345678910111213141516171819202122232425262728293031323334353637/* 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 всегда самый подробный. Здесь я определяю конкретный дизайн контента, напрямую обращаясь к разделам. В этом разделе я придерживаюсь иерархического порядка определений.

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); } …

123456789101112131415161718192021222324252627282930/* 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 и могу быстро их находить и настраивать.

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

123456789101112/* 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 я могу грамотно масштабировать весь макет пропорционально.

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

1234567891011121314151617181920212223242526272829303132333435363738394041424344/* 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

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

Оставьте ответ