Советы профессионалов CSS

Коллекция советов, которые помогут вам стать лучше в CSS.

Вы найдете больше классных списков под кураторством [@sindresorhus](https://github.com/sindresorhus/).

Содержание

• Профессиональные советы
• Поддержка
• Помощь проекту

Профессиональные советы

1. Используйте CSS Reset
2. Наследуйте box-sizing
3. Используйте unset вместо сброса всех свойств
4. Используйте :not() для добавления / удаления границ в меню навигации
5. проверьте, установлен ли шрифт локально
6. Добавьте line-height в body
7. Установите :focus для элементов формы
8. Выровнять все по вертикали
9. Списки, разделенные запятыми
10. Выбирайте элементы с использованием отрицательных значений в nth-child
11. Используйте SVG для значков
12. Используйте селектор “Лоботомированная сова”
13. Используйте max-height для ползунков на чистом CSS
14. Ячейки таблицы равной ширины
15. Используйте Flexbox вместо margin
16. Используйте селектор атрибутов для пустых ссылок
17. Стиль “по умолчанию” для ссылок
18. Блок с собственным отношением сторон
19. Задайте стили для поломанныx изображений
20. Используйте rem для глобальных размеров; Используйте em для локальных размеров
21. Отключите автовоспроизведение видео с включенным звуком
22. Используйте :root для шрифтов
23. Установите font-size для элементов формы, чтобы оптимизировать просмотр на мобильных устройствах
24. Использовать события указателя для управления событиями мыши
25. Установите display: none на разрывы строк, используемые как интервалы

Используйте CSS Reset

Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и с чистого листа начать оформление элементов. Вы можете использовать CSS библиотеки сброса такие как Normalize и др., или вы можете использовать более простой способ сброса:

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

Теперь для всех элементов свойства margin и padding будут равны нулю, а box-sizing: border-box позволяет указывать размеры всему блоку, а не его содержимому.

Демо

Примечание: Если вы будете следовать совету Наследуйте box-sizing, то вы можете не включать свойство box-sizing в ваш CSS Reset.

^{вернуться к оглавлению}

Наследуйте box-sizing

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

html {
  box-sizing: border-box;
}

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

Так значительно проще изменять box-sizing в плагинах или других компонентах, которые задают иное поведение.

Демо

^{вернуться к оглавлению}

Используйте unset вместо сброса всех свойств

При сбросе свойств элемента нет необходимости сбросить каждое отдельное свойство:

button {
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  outline: none;
  padding: 0;
}

Вы можете указать все свойства элемента, используя сокращенное выражение all. Установка значения unset изменяет свойства элемента на их начальные значения:

button {
  all: unset;
}

Примечание: сокращенные обозначения all и unset не поддерживаются в IE11.

^{вернуться к оглавлению}

Используйте :not() для добавления / удаления границ в меню навигации

Вместо того, чтобы добавлять границу…

/* add border */
.nav li {
  border-right: 1px solid #666;
}

…а затем убирать её с последнего элемента…

/* remove border */
.nav li:last-child {
  border-right: none;
}

…используйте псевдокласс :not(), чтобы добавить только к нужным элементам:

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

Селектор CSS определяет границу так, как ее описывает человек.

Демо

^{вернуться к оглавлению}

проверьте, установлен ли шрифт локально

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

@font-face {
  font-family: "Dank Mono";
  src:
    /* Full name */
    local("Dank Mono"),
    /* Postscript name */
    local("Dank Mono"),
    /* Otherwise, download it! */
    url("//...a.server/fonts/DankMono.woff");
}

code {
  font-family: "Dank Mono", system-ui-monospace;
}

Шляпный совет Адаму Аргайлу за то, что он поделился этим опытом и примером.

^{вернуться к оглавлению}

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

Вам вовсе не требуется добавлять свойство line-height к каждому <р>, <h*>, и т.д.. по отдельности. Вместо этого добавьте его в body:

body {
  line-height: 1.5;
}

Таким образом текстовые элементы легко могут наследовать свойство от body.

Демо

^{вернуться к оглавлению}

Установите :focus для элементов формы

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

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
  box-shadow: none;
  outline: #000 dotted 2px;
  outline-offset: .05em;
}

^{вернуться к оглавлению}

Выровнять все по вертикали

Нет, это не черная магия, вы действительно можете расположить элементы по центру по вертикали:

html,
body {
  height: 100%;
  margin: 0;
}

body {
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
  display: -webkit-flex;
  display: flex;
}

…а также с помощью CSS Grid:

body {
  display: grid;
  height: 100vh;
  margin: 0;
  place-items: center center;
}

Хотите разместить по центру что-то еще? Вертикально, горизонтально…что угодно, в любое время и в любом месте? У нас есть хорошая статья которая научит всему этому.

Примечание: Будьте осторожны с некоторыми багами flexbox в IE11.

Демо

^{вернуться к оглавлению}

Списки, разделенные запятыми

Сделайте список похожим на настоящий, разделенный запятыми список:

ul > li:not(:last-child)::after {
  content: ",";
}

Используйте псевдокласс :not() чтобы не добавлять запятую к последнему пункту.

Примечание: Этот совет не всегда даёт лучший результат, например, могут возникнуть проблемы у экранного диктора. Да и копирование / вставка из браузера не всегда работают со сгенерированным CSS контентом. Следует быть осторожным.

^{вернуться к оглавлению}

Выбирайте элементы с использованием отрицательных значений в nth-child

Используйте отрицательные значения в nth-child в CSS для выбора элементов с 1 по n.

li {
  display: none;
}

/* выбирает и отображает элементы с 1 по 3 */
li:nth-child(-n+3) {
  display: block;
}

Или, так как вы уже немного познакомились с :not(), попробуйте:

/* выберите все элементы, кроме первых 3, и покажите их */
li:not(:nth-child(-n+3)) {
  display: none;
}

Что же, это было довольно легко.

Демо

^{вернуться к оглавлению}

Используйте SVG для значков

Нет ни одной причины, чтобы не использовать SVG для значков:

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

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

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

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

^{вернуться к оглавлению}

Используйте селектор “Лоботомированная сова”

Название, безусловно, странное, но используя универсальный селектор (*) с соседним селектором (+), мы получаем мощное правило CSS:

* + * {
  margin-top: 1.5em;
}

В этом примере все элементы в потоке документа, которые следуют другие элементы получат margin-top: 1.5em.

Более подробную информацию о селекторе “Лоботомированная сова”, можно найти в статье Heydon Pickering на A List Apart.

Демо

^{вернуться к оглавлению}

Используйте max-height для ползунков на чистом CSS

Реализация ползунков на чистом CSS с помощью max-height и overflow hidden:

.slider {
  max-height: 200px;
  overflow-y: hidden;
  width: 300px;
}

.slider:hover {
  max-height: 600px;
  overflow-y: scroll;
}

При наведении элемент расширяется до значения max-height, а всё что не влезло, можно прокрутить.

^{вернуться к оглавлению}

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

Иногда работа с таблицами приносит боль, в таких случаях попробуйте задать table-layout: fixed чтобы ячейки были одинаковой ширины:

.calendar {
  table-layout: fixed;
}

Даешь макеты таблиц без боли!

Демо

^{вернуться к оглавлению}

Используйте Flexbox вместо margin

При работе с пробелами между колонок вы можете избавиться от псевдоклассов nth, first- и last-child воспользовавшись свойством flexbox space-between:

.list {
  display: flex;
  justify-content: space-between;
}

.list .person {
  flex-basis: 23%;
}

Теперь пробелы между колонками будут одного размера.

^{вернуться к оглавлению}

Используйте селектор атрибутов для пустых ссылок

Отображайте ссылки, когда элемент <a> пустой, но есть ссылка в атрибуте href:

a[href^="http"]:empty::before {
  content: attr(href);
}

Это очень удобно.

Демо

^{вернуться к оглавлению}

Стиль “по умолчанию” для ссылок

Добавьте для ссылок стиль “по умолчанию”:

a[href]:not([class]) {
  color: #008000;
  text-decoration: underline;
}

Теперь ссылки, вставленные через CMS, которые, как правило, не имеют атрибута class, будут иметь отличительный признак без влияния на каскад.

^{вернуться к оглавлению}

Блок с собственным отношением сторон

Чтобы создать блок с собственным отношением сторон, все, что вам нужно сделать, это добавить верхний или нижний padding к DIV:

.container {
  height: 0;
  padding-bottom: 20%;
  position: relative;
}

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

Использование padding 20% делает высоту параллелепипеда равной 20% от его ширины. Независимо от ширины окна, дочерний DIV будет сохранять соотношение сторон (100% / 20% = 5:1).

Демо

^{вернуться к оглавлению}

Задайте стили для поломанныx изображений

Сделайте поломанные изображения эстетически приятнее с CSS:

img {
  display: block;
  font-family: sans-serif;
  font-weight: 300;
  height: auto;
  line-height: 2;
  position: relative;
  text-align: center;
  width: 100%;
}

Теперь добавьте правила псевдо-элементов для отображения сообщения пользователю и URL-ссылки поломаного изображения:

img:before {
  content: "Упс, изображение ниже поломалось :(";
  display: block;
  margin-bottom: 10px;
}

img::after {
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Подробнее об этой модели в исходной статье Ire Aderinokun.

^{вернуться к оглавлению}

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

После установки базового размера шрифта всего проекта (html { font-size: 100%; }), установите размер шрифта для текстовых элементов через em:

h2 {
  font-size: 2em;
}

p {
  font-size: 1em;
}

Затем установите размер шрифта для модулей через rem:

article {
  font-size: 1.25rem;
}

aside .module {
  font-size: .9rem;
}

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

^{вернуться к оглавлению}

Отключите автовоспроизведение видео с включенным звуком

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

video[autoplay]:not([muted]) {
  display: none;
}

И снова мы воспользовались помощью псевдокласса :not().

^{вернуться к оглавлению}

Используйте :root для шрифтов

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

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

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

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

Демо

^{вернуться к оглавлению}

Установите font-size для элементов формы, чтобы оптимизировать просмотр на мобильных устройствах

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

input[type="text"],
input[type="number"],
select,
textarea {
  font-size: 16px;
}

:dancer:

^{вернуться к оглавлению}

Использовать события указателя для управления событиями мыши

[События указателя] (https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events) позволяют указать, как мышь взаимодействует с элементом, который он трогает. Чтобы отключить событие указателя по умолчанию на кнопке, например:

.button-disabled {
  opacity: .5;
  pointer-events: none;
}

Это так просто.

^{вернуться к оглавлению}

Установите display: none на разрывы строк, используемые как интервалы

Как отметил [Гарри Робертс] (https://twitter.com/csswizardry/status/1170835532584235008), это может помочь пользователям CMS использовать дополнительные разрывы строк для пробелов:

br + br {
  display: none;
}

^{вернуться к оглавлению}

Поддержка

Текущие версии Chrome, Firefox, Safari, Opera, Edge, и IE11.