Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md

README.md

light bulb icon

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

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

Вы найдете больше классных списков под кураторством @sindresorhus.

Содержание

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

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

Используйте 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 не поддерживается в IE11 и в настоящее время рассматривается для поддержки в Edge. 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;
}

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

Демо

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

Добавьте 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, будут иметь отличительный признак без влияния на каскад.

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

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

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

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

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

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

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

Чтобы создать блок с собственным отношением сторон, все, что вам нужно сделать, это добавить верхний или нижний 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;
}

💃

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

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

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

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

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

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

Поддержка

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