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

1
31477

Подборка рекомендаций, с помощью которых вы значительно улучшите свои знания в CSS. Прочитай и прокачай свои знания!

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

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

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

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

Демо

Пояснение: В случае следования  рекомендации "Наследуйте box-sizing", у вас есть возможность не включать функцию box-sizing в ваш CSS Reset.

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

Пускай box-sizing унаследуется от html:

html {
  box-sizing: border-box;
}

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

Именно так гораздо удобнее трансформировать box-sizing в плагинах или иных элементах, которые определяют другой образ действий.

Применяйте: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 или даже .nav li:first-child ~ li, но с :not() становится яснее, а селектор CSS описывает края на понятном нам языке.

Демо

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

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

body {
  line-height: 1.5;
}

Тем самым текстовые компоненты совершенно просто смогут унаследовать свойство от body.

Демо

Выравнивание элементов по вертикали

Это не чудо, без сомнения вы сможете разместить объекты, как по центру, так и по вертикали:

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

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

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

Пояснение: Обратите внимание на некие баги 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, имеют в себе характерный признак, не воздействующий на каскад.

Непрерывный вертикальный ритм

Примените многофункциональный селектор (*) в пределах компонента, для того чтобы сформировать непрерывный вертикальный ритм в CSS.:

.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).

Укажите стили для битых изображений

Перед нами пример как сделать битые изображения эстетически приемлемыми для глаза в 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%;
}

 

Сейчас следует дополнить правилами псевдо-элементы для изображения сообщения пользователю и 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%; }), укажите размер шрифта в CSS. для текстовых компонентов через 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;
}

Поддержка

Действующие версии Firefox, Chrome, Safari, Edge, IE11, Opera.

Другие материалы по теме:

РУБРИКИ В СТАТЬЕ

МЕРОПРИЯТИЯ

Комментарии 1

ВАКАНСИИ

Unity Tech Lead
по итогам собеседования
Middle\Senior .Net разработчик
от 120000 RUB до 165000 RUB
Unity Developer
по итогам собеседования
Programmer Unity
Краснодар, по итогам собеседования

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ

BUG