Сочетание модульности CSS

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

CSS-разработка
Модульное определение CSS
Как реализуется модульность CSS

Оригинальный адрес, добро пожаловать в Star и подписывайтесьмой блог.

CSS-разработка

Когда мы пишем css, мы на самом деле проходим следующие этапы:

Рукописный необработанный CSS
Использование препроцессора Sass/Less
Использование постпроцессора PostCSS
использовать css-модули
использовать css в js

Рукописный необработанный CSS

Когда мы впервые научились писать страницы, мы все научились писать css в следующих случаях:

Инлайн-стиль, то есть прописать CSS-код прямо в атрибуте стиля в html.
Встроенные стили, то есть написание классов в тегах стилей в html h, предоставляются для использования текущей страницей.
Импортировать стили, то есть импортировать другие стили во встроенный стиль с помощью метода @import и предоставлять их для использования на текущей странице.
Внешние стили, то есть с помощью тегов ссылок в html, загружают стили и предоставляют их для использования на текущей странице.

В наших непрерывных исследованиях мы постепенно сформировали способ писатьвстроенный стильа такжевнешний стильдля основной писательской привычки.

У всех, должно быть, возникают сомнения, читая это, почему не рекомендуется использовать встроенные стили?

Недостатки использования встроенных стилей

Стили нельзя использовать повторно.

Вес стиля слишком высок, и стиль нелегко охватить.

Уровень представления не отделен от структурного уровня.

Кэшировать нельзя, что влияет на эффективность загрузки.

Дальше продолжаем разбирать, почему не рекомендуется импорт стиля?

После тестирования использование @import в css будет иметь следующие две ситуации:

1. В IE6-8 таблица стилей, на которую указывает оператор @import, не будет загружаться одновременно с другими ресурсами на странице, а начнет загрузку после загрузки всех ресурсов на странице.

2. Если вы @импортируете другие css в теге ссылки, страница будет ждать, пока все ресурсы будут загружены, прежде чем начать анализировать css @import в теге ссылки.

Недостатки использования импортированных стилей

Импортированный стиль можно поместить только в первую строку тега стиля, остальные строки будут недействительны.

Таблица стилей, объявленная @import, не может в полной мере использовать поведение браузера при одновременном запросе ресурсов, и ее загрузка часто задерживается или приостанавливается из-за загрузки других ресурсов.

Может вызвать мерцание стилей страницы из-за ленивой загрузки таблиц стилей @import.

Использование препроцессора Sass/Less

С течением времени мы постепенно обнаружили, что писать нативный CSS недружелюбно, например, нативный CSS не поддерживает переменные, вложенность, родительские селекторы и т. д. Эти различные проблемы привели к появлению препроцессоров, таких как sass/ меньше.

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

Постпроцессор PostCSS

С непрерывным развитием фронтенд-инжиниринга все больше и больше инструментов разрабатываются фронтенд-шишками.Идея состоит в том, чтобы передать всю повторяющуюся работу машине, а postcss производится в области CSS.

Postcss можно назвать babel в мире css, принцип его реализации заключается в том, чтобы анализировать наш css-код через ast, а затем обрабатывать результаты анализа, что выводит множество сценариев использования для обработки css.

Распространенные сценарии использования postcss:

Проверить синтаксис css с помощью stylelint
Автоматически увеличивать префикс браузера autoprefixer
Синтаксис для компиляции css next

Дополнительные сценарии использования postcss

Модульность CSS быстро развивается

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

Но мы знаем, что css сопоставляет элементы на основе имен классов.Если два компонента используют одно и то же имя класса, последний перезапишет стиль первого.Похоже, что разрешение конфликта имен стилей является большой проблемой.

Для решения этой проблемы родилась концепция модульности CSS.

Модульное определение CSS

Вы боретесь с именами классов?
Вы беспокоитесь о том, чтобы использовать то же имя класса, что и кто-то другой?
Вас раздражает нечеткая иерархия?
Вы расстроены тем, что код сложно использовать повторно?
Вас пугает размер common.css?

Если вы столкнулись с вышеперечисленными проблемами, то необходимо использовать модуляризацию css.

Как реализуется модульность CSS

Соглашение об именах БЭМ

БЭМ означает блок, элемент, модификатор. Это методология внешнего именования, предложенная командой Яндекса. Это умное наименование делает ваши классы css более прозрачными и значимыми для других разработчиков.

Соглашение об именах для БЭМ выглядит следующим образом:

/* 块即是通常所说的 Web 应用开发中的组件或模块。每个块在逻辑上和功能上都是相互独立的。 */
.block {
}

/* 元素是块中的组成部分。元素不能离开块来使用。BEM 不推荐在元素中嵌套其他元素。 */
.block__element {
}

/* 修饰符用来定义块或元素的外观和行为。同样的块在应用不同的修饰符之后，会有不同的外观 */
.block--modifier {
}

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

CSS Modules

Модули CSS означают, что мы импортируем наш код CSS, как импорт js. Каждое имя класса в коде является атрибутом импортируемого объекта. Таким образом, при его использовании можно четко указать стиль CSS, на который ссылаются.

А модули CSS будут автоматически преобразовывать имена классов в хеш-значения при упаковке, полностью устраняя проблему конфликтов имен классов CSS.

Он используется следующим образом:

1. Определите файл css.

.className {
  color: green;
}
/* 编写全局样式 */
:global(.className) {
  color: red;
}

/* 样式复用 */
.otherClassName {
  composes: className;
  color: yellow;
}

.otherClassName {
  composes: className from "./style.css";
}

2. Импортируйте файл css в модуль js.

import styles from "./style.css";

element.innerHTML = '<div class="' + styles.className + '">';

3. Настроить упаковку css-loader.

CSS-модули нельзя использовать напрямую, их необходимо упаковать.Как правило, настройку css-модулей можно выполнить, настроив свойство modules в css-loader.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use:{
          loader: 'css-loader',
          options: {
            modules: {
              // 自定义 hash 名称
              localIdentName: '[path][name]__[local]--[hash:base64:5]',
            }
          }
       }
    ]
  }
};

4. Окончательное упакованное имя класса css генерируется длинной строкой хеш-значений.

._2DHwuiHWMnKTOYG45T0x34 {
  color: red;
}

._10B-buq6_BEOTOl9urIjf8 {
  background-color: blue;
}

CSS In JS

CSS в JS означает использование языка js для написания css, нет необходимости в каких-то отдельных файлах css, весь код css размещается внутри компонента для реализации модуляризации css.

CSS в JS — это на самом деле своего рода идея написания, существует более 40 видов реализации, самая известная из них — стилизованные компоненты.

Он используется следующим образом:

import React from "react";
import styled from "styled-components";

// 创建一个带样式的 h1 标签
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// 创建一个带样式的 section 标签
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// 通过属性动态定义样式
const Button = styled.button`
  background: ${props => (props.primary ? "palevioletred" : "white")};
  color: ${props => (props.primary ? "white" : "palevioletred")};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

// 样式复用
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
  <Button primary>Primary</Button>
</Wrapper>;

Как видите, css мы пишем прямо в js, при этом стиль создается при определении исходного html, а стилизованный компонент может отрисовываться при его использовании.

Кроме того, есть и другие известные библиотеки:

emotion
radium
glamorous

Суммировать

Наконец, поместите сводную картину.