Прокачайте ваши навыки в CSS: 20 советов профессиональной вёрстки сайтов

В разработке мы всё больше ориентируемся на эффективность. Нужна быстрая загрузка и скорейший рендеринг за счет правильного выбора селекторов и минимизации кода. Препроцессоры Less и SCSS сильно облегчают дело, но существует множество способов написать минималистичный, быстрый CSS «родным» способом. В этом руководстве 20 советов Pro CSS, которые сокращают дублирование правил и переопределений и стандартизируют стили. Они помогут вам создать персональный стартовый фреймворк, эффективный и рабочий. Но сначала подпишитесь на наш Телеграм-канал. Без уведомлений вы пропускаете массу интересного!

1 — Используйте CSS-сброс

Библиотеки сброса CSS, такие как normalize.css, существуют уже много лет. Они очищают стили вашего сайта и помогают отображать сайт более-менее одинаково в разных браузерах. В большинстве случаев вам не нужны все правила normalize.css и вы обойтёсь одним простым правилом, чтобы обнулить все margin'ы и padding'и, которые браузер отображает самостоятельно:

* {    
  box-sizing: border-box;   
  margin: 0;    
  padding: 0;  
}

Использовать box-sizing необязательно — если вы следуете указанному ниже Inherit box-sizing, вы можете это пропустить.

2 — Inherit box-sizing

Пусть box-sizing будет унаследован от html:

html {    
    box-sizing: border-box;  
}    
:before, *:after {    
    box-sizing: inherit;  
}

Это облегчает изменение box-sizing, когда код вводится через сторонние плагины или приложения, которые используют другое поведение.

3 — Удалить отступы margin с Flexbox

Сколько раз вы пытались создать сетку, например, портфолио или галерею изображений, где вы использовали float, а затем должны были очистить их или сбросить поля, чтобы столбцы разбивались на нужное вам количество строк? Избавьтесь от n-го, первого и последнего отступа, используя space-between между свойствами во flexbox:

.flex-container {    
    display: flex;   
    justify-content: space-between;  
}    
.flex-container .item {    
    flex-basis: 23%;  
}

Теперь колонки выглядят равномерно.

4 — Используйте :not() для стилизации Border в списках

Очень распространенной практикой в веб-дизайне было использование :last-child или :nth-child селекторов для отмены стиля, ранее объявленного в родительском селекторе. Подумайте о навигационном меню, которое использует границы для создания разделителя между ссылками, и о втором правиле, добавленном для снятия этой границы с конца:

.nav li {    
    border-right: 1px solid #666;  
}
.nav li:last-child {    
    border-right: none;  
}

Это довольно грязно, так как заставляет браузер не только визуализировать вещи одним способом, но и отменять их для конкретного селектора. Сброс стилей таким способом иногда неизбежен, но по большей части вы можете использовать псевдо-класс :not(), чтобы применить стиль только к тем элементам, которые вам нужны, в одном единственном утверждении:

.nav li:not(:last-child) {    
    border-right: 1px solid #666;  
}

Здесь сказано, поставить границу на всех пунктах .nav-листа, кроме последнего. Как просто!

Конечно, вы также можете использовать .nav li + li или даже .nav li:first-child ~ li, но :not() всегда будет более семантичным и простым для понимания.

5 – Добавьте line-height в body

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

Вместо того, чтобы добавлять высоту строк к каждой <p>, <h*> и так далее, добавляйте ее в тело:

body {    
    line-height: 1.5;  
}

Обратите внимание, что здесь мы не объявляем единицу измерения — мы просто говорим, чтобы высота строки была в полтора раза больше, чем размер шрифта для отрисовываемого текста.

6 – Vertically-Center везде

Установка глобального правила вертикальной центровки макета — отличный способ установить основу для элегантного отображения макета, если вы не хотите использовать CSS Grid.

html, body {    
    height: 100%;    
    margin: 0;  
}    
body {    
    -webkit-align-items: center;    
    -ms-flex-align: center;    
    align-items: center;    
    display: -webkit-flex;    
    display: flex;  
}

7 – Используйте SVG-иконки

SVG хорошо масштабируется для всех типов разрешений и поддерживается во всех браузерах. Так что избавьтесь от своих файлов .png, .jpg и остальной .gif-jif-чуши. Даже FontAwesome теперь предлагает иконки SVG в FontAwesome 5. SVG работает так же, как и любой другой тип изображения:

.logo {    
    background: url("logo.svg");  
}

Если вы используете SVG для взаимодействующих элементов, таких как кнопки, и SVG не загружается, правило, подобное этому, поможет сохранить доступность:

.no-svg .icon-only:after {    
    content: attr(aria-label);  
}

8 – Используйте «Owl» селектор

Используйте универсальный селектор (*) со смежным селектором (+) и вы сможете задать правила для всех элементов в потоке документа, которые следуют за другими элементами:

 {    
    margin-top: 1.5rem;  
}

Это отличный трюк, который может помочь вам создать более однородный шрифт и интервалы. В приведенном выше примере, все элементы, которые следуют за другими элементами, например, H4, который следует за H3, или абзац, следующий за другим абзацем, будут иметь по крайней мере 1.5rem отступа (примерно 30px).

9 — Последовательный вертикальный ритм

Последовательный вертикальный ритм обеспечивает визуальную эстетику, которая делает содержимое читабельным. Если owl-селектор получается слишком общим, используйте универсальный селектор (*) внутри элемента для создания последовательного вертикального ритма для определенных участков макета:

.intro > * {   
   margin-bottom: 1.25rem;  
}

10 – Use box-decoration-break чтобы текст был красивым

Предположим, вы стараетесь получить равномерный интервал, поля, подсветку или цвет фона к длинным строкам текста, которые обернуты более чем одной строкой, но не хотите, чтобы весь абзац или заголовок выглядел как один большой блок. Свойство box-decoration-break позволяет применять стили только к тексту, сохраняя при этом нетронутыми padding'и и margin'ы. Это особенно полезно, если вы хотите применить выделение при наведении курсора или стиль подтекста в слайдере, чтобы он подсветился:

.p {
  display: inline-block;
  box-decoration-break: clone;
  -o-box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

Объявление inline-block позволяет наносить цвета, фон, поля и подкладку на каждую строку текста, а не на весь элемент, а объявление clone обеспечивает равномерное нанесение этих стилей на каждую строку.

11 — Ячейки таблицы равной ширины

Таблицы могут быть шилом в з..це, поэтому попробуйте использовать таблицу-раскладку: фиксированную, чтобы ячейки оставались на одинаковой ширине:

.calendar {    
    table-layout: fixed;  
}

12 — Принудительное отображение пустых ссылок с помощью селекторов атрибутов

Это особенно полезно для ссылок, вставляемых через CMS, которые, как правило, не имеют атрибута класса и помогают стилизовать их специально, не оказывая общего влияния на каскад. Например, элемент <a> не имеет текстового значения, но атрибут href имеет ссылку:

a:empty::before {    
    content: attr(href);  
}

13 — Стиль ссылки «Default»

Кстати, о стиле ссылок, вы можете найти общий стиль практически в каждом листе стилей. Это заставляет вас писать дополнительные переопределения и правила стилей для любых ссылок в дочернем элементе, а при работе с CMS, например, WordPress, может привести к проблемам со стилем самой главной ссылки, например, с превышением цвета текста кнопки. Попробуйте этот менее навязчивый способ чтобы добавить стиль для ссылок «по умолчанию»:

a:not() {    
    color: #999;    
    text-decoration: none;  
    transition: all ease-in-out .3s;
}

Теперь стиль будет применяться только к тем ссылкам, которые не имеют своего правила стиля.

14 — Блоки с нужным соотношением сторон

Чтобы создать блок с нужными пропорциями, вам нужно добавить div'у top или bottom padding:

.container {    
    height: 0;    
    padding-bottom: 20%;    
    position: relative;  
}    
.container div {    
    border: 2px dashed #ddd;    
    height: 100%;    
    left: 0;    
    position: absolute;    
    top: 0;    
    width: 100%;  
}

Использование 20% отступа делает высоту div равной 20% от ее ширины. Независимо от ширины viewport, дочерний div сохранит свои пропорции (100% / 20% = 5:1).

15 — Беспорядочные изображения в стиле

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

img {    
    display: block;    
    font-family: Helvetica, Arial, sans-serif;    
    font-weight: 300;    
    height: auto;    
    line-height: 2;    
    position: relative;    
    text-align: center;    
    width: 100%;  
}
img:before {    
    content: "We're sorry, the image below is missing :(";    
    display: block;    
    margin-bottom: 10px;  
}    
img:after {    
    content: "(url: " attr(src) ")";   
    display: block;    
    font-size: 12px;  
}

16 – Используйте rem для глобальных размеров, а em для локальных размеров

После установки базового размера шрифта в корне, например html{font-size: 15px;}, вы можете установить размер шрифта для размещения элементов в rem:

article {    
    font-size: 1.25rem;  
}    
aside {    
    font-size: .9rem;  
}

Затем установите размер шрифта для текстовых элементов в соответствии в em:

h2 {    
    font-size: 2em;  
}    
p {    
    font-size: 1em;  
}

Теперь каждый содержащий элемент становится раздробленным и легким в стиле, более удобным в обслуживании и гибким.

17 — Заглушите автоматически проигрывающиеся видеозаписи, которые пока не видно

Это отличная лайфхак как перестать раздражать ваших посетителей звуком из автопроигрываемого видео при загрузке страницы. И снова на помощь приходит замечательный псевдо-селектор :not():

video:not() {    
    display: none;  
}

18 – Используйте :root для Flexible Type

Размер шрифта в адаптивной вёрстке должен автоматически подстраиваться под размер экрана. Рассчитайте размер шрифта по высоте и ширине экрана, используя :root: и единицы viewport:

:root {    
    font-size: calc(1vw + 1vh + .5vmin);  
}

Теперь вы можете использовать единицу em, основанную на значении, вычисленном в :root:

body {    
    font: 1rem/1.6 sans-serif;  
}

Сочетайте это с приведенным выше трюком «rem/em» и получите ещё больший контроль.

19 — Установите размер шрифта в своих текстовых формах для большего удобства на мобильных устройствах

Чтобы мобильные браузеры (iOS Safari и т.д.) не увеличивали размеры элементов HTML-формы при нажатии выпадающего списка <select>, добавьте размер шрифта к стилям ввода:

input,  
input,  
select,  
textarea {    
    font-size: 16px;  
}

20 — Используйте CSS-переменные!

И самое прикольное: высший уровень CSS — это переменные CSS. Переменными можно объявить набор общих значений свойств, которые могут быть повторно использованы через ключевое слово в любом месте таблицы стилей. Ваш бренд может иметь набор цветов, которые будут использоваться во всем проекте для сохранения последовательности. Повторение этих значений цветов снова и снова в CSS является не только рутинной работой, но и сулит ошибки. Если в какой-то момент цвет необходимо изменить, вы вынуждены искать и заменять его, что не является надежным или быстрым. Переменные делают такую настройку намного проще. Например:

:root {
  --main-color: #06c;
  --accent-color: #999;
}
h1, h2, h3 {
  color: var(--main-color);
}
a:not(),
p,
footer span{
 color: var(--accent-color);
}