Что такое CSS? Каскадные таблицы стилей, адаптивный CSS, нахальный CSS, сжатие, минимизация, деминификация, инструмент распаковки

Что такое каскадные таблицы стилей (CSS)?

Douglas Karr Четверг, Февраль 9, 2023

1 104 Прочитано 4 минут

Читайте ниже полное объяснение того, как работают каскадные таблицы стилей. Мы отображаем наши приложения в верхней части страницы, чтобы их было легко найти и использовать. Если вы читаете эту статью по электронной почте или в ленте, нажмите, чтобы сжать свой CSS.

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

Структура языка CSS

Компания селектор это элемент HTML, который вы хотите стилизовать, и собственность и ценностное определите стили, которые вы хотите применить к этому элементу:

selector {
  property: value;
}

Например, следующий CSS сделает все <h1> элементы на странице имеют красный цвет и размер шрифта 32px:

CSS

h1 {
  color: red;
  font-size: 32px;
}

Результат

Заголовок

Вы также можете указать CSS для уникального идентификатора элемента:

CSS

/* styles for an element with ID "intro" */
#intro {
  font-weight: bold;
  text-align: center;
}

Результат

Главная

Или примените класс к нескольким элементам:

CSS

/* styles for elements with class "highlight" */
.highlight {
  background-color: yellow;
}

Результат

Я хочу, чтобы выделить слово в теге span.

Вы можете включить CSS в свой HTML-документ тремя способами:

Встроенный CSS, используя style атрибут HTML-элемента

Внутренний CSS, используя <style> элемент в <head> вашего HTML-документа
Внешний CSS, используя отдельный файл .css, связанный с вашим HTML-документом с помощью <link> элемент в <head> вашего HTML-документа

Адаптивный CSS

CSS невероятно гибок и может использоваться для настройки отображения элементов в зависимости от разрешения экрана, поэтому вы можете иметь тот же HTML, но создать его. отзывчивый к разрешению устройства:

/* media query for responsive design */
@media (max-width: 768px) {
  p {
    font-size: 14px;
  }
  #intro {
    font-size: 20px;
  }
}

CSS-сжатие

В приведенном выше примере вы можете видеть, что есть комментарий, медиа-запрос и несколько стилей, которые используют пробелы и переводы строк для организации представления CSS. Хорошей практикой является минимизация или сжатие вашего CSS на вашем сайте, чтобы уменьшить размер файла и, следовательно, время, необходимое для запроса и отображения вашего стиля. Это немалая сумма... вы можете увидеть более 50% экономии на некоторых из приведенных выше примеров.

Многие конфигурации серверов предлагают инструменты, которые автоматически сжимают CSS на лету и кэшируют уменьшенный файл, чтобы вам не приходилось делать это вручную.

Что такое СКСС?

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

Преимущества СКС

Улучшенная ремонтопригодность: благодаря использованию переменных вы можете хранить значения в одном месте и повторно использовать их во всей таблице стилей, что упрощает поддержку и обновление ваших стилей.
Улучшенная организация: с помощью примесей вы можете группировать и повторно использовать наборы стилей, делая вашу таблицу стилей более организованной и удобной для чтения.
Расширенная функциональность: SCSS включает в себя множество функций, недоступных в стандартном CSS, таких как функции, управляющие структуры (например, if/else) и арифметические операции. Это позволяет создать более динамичный и выразительный стиль.
Улучшенная производительность: файлы SCSS компилируются в CSS, что может повысить производительность за счет уменьшения объема кода, который должен анализироваться браузером.

Недостатки СКС

Кривая обучения: синтаксис SCSS отличается от стандартного CSS, и вам необходимо изучить этот новый синтаксис, прежде чем вы сможете эффективно его использовать.
Дополнительная сложность: хотя SCSS может сделать вашу таблицу стилей более организованной и простой в обслуживании, она также может внести дополнительную сложность в вашу кодовую базу, особенно если вы не знакомы с новыми функциями и синтаксисом.
Инструментарий: чтобы использовать SCSS, вам понадобится компилятор для перевода вашего кода SCSS в CSS. Это требует дополнительной настройки и инструментов, что может стать барьером для входа для некоторых разработчиков.

В приведенном ниже примере код SCSS использует переменные для хранения значений ($primary-color и $font-size), который можно повторно использовать во всей таблице стилей. Код CSS, сгенерированный из этого кода SCSS, эквивалентен, но не включает переменные. Вместо этого значения переменных используются непосредственно в CSS.

$primary-color: blue;
$font-size: 16px;

body {
  font-size: $font-size;
  color: $primary-color;

  h1 {
    font-size: 2em;
    color: $primary-color;
  }
}

Еще одна особенность SCSS, продемонстрированная в этом примере, — вложенные стили. В коде SCSS h1 стили вложены в body стили, что невозможно в стандартном CSS. Когда код SCSS компилируется, вложенные стили расширяются в отдельные стили в коде CSS.

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