Используйте 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 будет унаследован от 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;
}
Списки, разделенные запятыми
Сделайте список похожим на настоящий, разделенный запятыми список:
ul > li:not(:last-child)::after {
content: ",";
}
Используйте псевдокласс :not() чтобы не добавлять запятую к последнему пункту.
Выбирайте элементы с использованием отрицательных значений в 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.
Используйте 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;
}
Используйте 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;
}
Использовать события указателя для управления событиями мыши
События указателя позволяют указать, как мышь взаимодействует с элементом, который он трогает. Чтобы отключить событие указателя по умолчанию на кнопке, например:
.button-disabled {
opacity: .5;
pointer-events: none;
}
Это так просто.
Установите display: none на разрывы строк, используемые как интервалы
Как отметил Гарри Робертс, это может помочь пользователям CMS использовать дополнительные разрывы строк для пробелов:
br + br {
display: none;
}