В разработке мы всё больше ориентируемся на эффективность. Нужна быстрая загрузка и скорейший рендеринг за счет правильного выбора селекторов и минимизации кода. Препроцессоры 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 обеспечивает равномерное нанесение этих стилей на каждую строку.
Остальные 10 советов в источнике: https://reconcept.ru/blog/prokacajte-vasi-navyki-v-css-20-sovetov-professinal-noj-verstki-sajtov