Краткое руководство по сокращениям в CSS

CSS (каскадные таблицы стилей) - это мощный инструмент для стилизации и форматирования веб-страниц. Для программиста важно оптимизировать свой рабочий процесс и писать чистый, эффективный код. Одним из способов достижения этой цели является использование сокращенных свойств CSS. В этом руководстве мы рассмотрим несколько методов сокращения CSS, которые могут повысить вашу производительность.

Background

Свойство background позволяет задать различные свойства, связанные с фоном, такие как цвет, изображение, повторяемость, положение и вложение. Вместо того, чтобы записывать отдельные свойства от руки, вы можете использовать сокращенную версию, чтобы объединить их в одну строку.

.element {
  background: #000 url(image.png) no-repeat top left fixed;
}

Приведенный выше сокращенный код устанавливает цвет фона на черный #000, фоновое изображение на image.png, без повторов, размещается в левом верхнем углу и фиксируется на месте.

Border

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

.element {
  border: 1px solid black;
}

Приведенный выше сокращенный код устанавливает ширину границы равной 1 пикселю, стиль границы - сплошной, а цвет границы - черный.

Outline

Свойство outline используется для создания контура вокруг элемента, как правило, для визуального выделения. Оно объединяет ширину, стиль и цвет контура в одно общее свойство.

.element {
  outline: thick dotted red;
}

Приведенный выше сокращенный код устанавливает ширину контура на жирный, стиль контура - на пунктирный, а цвет контура - на красный.

Margin

Свойство margin используется для задания поля вокруг элемента. Оно определяет размер поля для каждой стороны (верхней, правой, нижней и левой) по отдельности. Однако вы также можете использовать сокращение, чтобы указать все свойства в одной строке.

.element {
  margin: 1em 1.5em 2em 2.5em;
}

Приведенный выше сокращенный код устанавливает верхнее поле равным 1 em, правое поле равным 1,5 em, нижнее поле равным 2 em и левое поле равным 2,5 em. В качестве альтернативы вы можете использовать сокращение для равных полей со всех сторон:

.element {
  margin: 1em 0.5em;
}

Приведенный выше код устанавливает все поля равными 1 em, за исключением правого и левого полей, которые равны 0,5 em.

Padding

Свойство padding используется для задания отступа вокруг элемента. Оно определяет размер отступа для каждой стороны (верхней, правой, нижней и левой) по отдельности. Аналогично свойству margin, вы можете использовать сокращение для указания всех отступов в одной строке.

.element {
  padding: 1em 1.5em 2em 2.5em;
}

Аналогично свойству:

.element {
  padding: 1em 0.5em;
}

List Style

Свойство list-style используется для определения стиля маркеров в неупорядоченных списках. Оно объединяет тип стиля списка, положение и изображение в одно единое свойство.

.element {
  list-style: square inside url("image.png");
}

В приведенном выше сокращенном коде для типа стиля списка задается значение square, для позиции стиля списка inside, а для изображения в стиле списка image.png. Используя сокращение, вы можете быстро определить внешний вид маркеров списка.

Animation

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

.element {
  animation: motion 2s ease-in 1s alternate infinite none running;
}

В приведенном выше сокращенном коде для названия анимации задается значение motion, длительность 2 секунды, функция синхронизации ease-in, задержка 1 секунда, направление alternate, количество итераций infinite, режим заполнения none, а состояние воспроизведения running.

Flex

Свойство flex используется в flex-контейнерах Flexbox для указания того, как элементы flex должны увеличиваться в размерах, сжиматься и иметь определенный размер. Оно объединяет свойства flex-grow, flex-shrink и flex-basis в единое сокращенное свойство.

.element {
  flex: 1 1 auto;
}

Приведенный выше сокращенный код устанавливает значение flex-grow равным 1, значение flex-shrink равным 1 и значение flex-basis равным auto.

Grid

Свойство grid используется для создания макетов на основе сетки в CSS. Оно объединяет строки шаблона сетки и столбцы шаблона сетки в одно сокращенное свойство.

.element {
  grid: 100px auto 300px / repeat(2, 1fr) 100px;
}

Приведенный выше сокращенный код устанавливает для строк шаблона grid значения 100px, auto и 300px, а для столбцов шаблона grid - значения repeat(2, 1fr) и 100px.

Grid Area

Свойство grid-area используется для присвоения элементам сетки определенных областей сетки в макете сетки CSS. Оно объединяет начало строки сетки, начало столбца сетки, конец строки сетки и конец столбца сетки в одно сокращенное свойство.

.element {
  grid-area: 2 / 1 / span 2 / span 3;
}

Приведенный выше сокращенный код устанавливает начало строки сетки на 2, начало столбца сетки на 1, конец строки сетки на span 2 и конец столбца сетки на span 3.

Grid Column

Свойство grid-column используется для указания столбцов сетки, которые охватывает элемент сетки в рамках CSS-макета сетки. Оно объединяет начало и конец столбца сетки в одно сокращенное свойство.

.element {
  grid-column: 1 / 3;
}

В приведенном выше сокращенном коде для начала столбца таблицы задано значение 1, а для конца столбца таблицы - значение 3, что указывает на то, что элемент таблицы охватывает два столбца. В качестве альтернативы вы можете использовать span для определения количества столбцов, которые должен охватывать элемент:

.element {
  grid-column: 1 / span 2;
}

Grid Row

Свойство grid-row используется для указания строк сетки, которые охватывает элемент сетки в рамках CSS-макета grid. Оно объединяет начало и конец строки сетки в одно сокращенное свойство.

.element {
  grid-row: 1 / 3;
}

В приведенном выше сокращенном коде для начала строки сетки задано значение 1, а для конца строки сетки - значение 3, что указывает на то, что элемент сетки занимает две строки. В качестве альтернативы вы можете использовать span для определения количества строк, которые должен занимать элемент:

.element {
  grid-row: 1 / span 2;
}

Transition

Свойство transition используется для создания плавных переходов между различными значениями свойств CSS. Оно позволяет вам определить свойство перехода, длительность, функцию синхронизации и задержку в одном сокращенном свойстве.

.element {
  transition: extend 2s linear 1s;
}

Приведенный выше сокращенный код устанавливает для свойства перехода значение extend, длительность 2 секунды, функцию синхронизации linear, а задержку 1 секунду.

Text Decoration

Свойство text-decoration используется для добавления к тексту декоративных стилей, таких как underline, overline, line-through и color. Оно объединяет цвет оформления текста, линию, стиль и толщину в одно сокращенное свойство.

.element { 
  text-decoration: blue underline solid 2px; 
}

Приведенный выше сокращенный код устанавливает цвет оформления текста синим, добавляет подчеркивание, устанавливает стиль линии сплошным и устанавливает толщину линии равной 2 пикселям.

Font

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

.element {
  font: bold italic small-caps 1em/1.6 Arial, Helvetica, sans-serif;
}

Приведенный выше сокращенный код устанавливает значение для шрифта bold, стиль шрифта italic, вариант шрифта small-caps, размер шрифта 1em, высоту строки 1,6, а семейство шрифтов Arial, Helvetica, sans-serif.

Заключение

В этом руководстве мы рассмотрели различные методы сокращения CSS, которые могут повысить вашу эффективность. Не забудьте поэкспериментировать с этими методами и внедрить их в свой рабочий процесс, чтобы упростить процесс разработки CSS.