+7(982) 597-7179

Как организовать свой CSS?

Время на прочтение: 3 мин.

В данной статье рассматривается структурный подход к организации CSS кода. Стоит сказать, что это лишь один из методов, которые мы применяем. Все зависит от масштаба проекта и возраста. Примеров организаций множество. Вот некоторые из них: БЭМ, OOCSS, SMACSS, Atomic CSS, MCSS, AMCSS, FUN. Каков из методов использовать решать вам.

Мы используем rem как единицу измерения для всех размеров, кроме границ, которые мы определяем как px. rem — для адаптивной верстки, когда задается всему документу шрифт html { font-size: 16px; } и от него отталкиваются все размеры (1rem = 16px) , для @media screen and (max-width: 768px) { html { font-size: 12px; } — соответственно на мобильных девайсах все дружно будет в меньших размерах, не придется для каждого переписывать размеры. Система CSS состоит из следующих компонентов:

  • Сброс настроек
  • Переменные
  • Глобальные настройки проекта
  • Конкретные настройки контента
  • hover-эффекты
  • Медиа-запросы
/* Reset */

...


/* Variables */

...


/* Globals */

...


/* Specifics */

...


/* Hovers */

...


/* Media queries */

...

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

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

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

Переменные

Современные браузеры (привет internet explorer) давно поддерживают переменные, поэтому мы с удовольствием будем использовать их в своих проектах.

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

Определяем базовые цвета, черный и белый, в отдельном блоке. Сразу под ним все цвета проекта.

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

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

В глобальных настройках проекта мы устанавливаем базовые правила типографики и унифицируем интервалы.

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

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

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

Hover-эффекты

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

Таким образом мы отслеживаем все hover и можем быстро их находить и настраивать.

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

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

Спасибо за чтение! Надеюсь вам помогла статья и навела на интересные размышления. Мы были бы рады если бы вы поделились ими в комментариях.


Читайте также:

Приглашаем поучаствовать в обсуждении статьи:

Комментариев 0

Войти через: