Разговор о PostCSS

JavaScript CSS PostCSS Stylus
Разговор о PostCSS

предисловие

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

CSS, этот, казалось бы, незаметный парень, играет не менее важную роль в разработке, чем js. CSS, сценарий стиля, кажется, имеет определенную дистанцию ​​от языков программирования, мы можем понимать его как метод описания. Кажется, это заставляет css восприниматься легкомысленно. Однако в последние годы CSS претерпел большие изменения — модуль CSS. Я помню, что можно сказать, что период расцвета js был вызван узлом, который привнес концепцию модуля, так что JS можно было разработать для разработки проектов. Итак, сегодняшний css будет все краше и краше. Если вам понравилась моя статья, добро пожаловать в комментарии, добро пожаловать в Star~. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

текст

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

я хочу попрощаться с тобой

预处理器
препроцессор

В настоящее время в инженерной разработке наиболее часто используемыми должны быть Less, Sass и Stylus. Во-первых, давайте представим их. У них есть унифицированное название — препроцессор css. Что такое препроцессор CSS? Это должно быть что-то, что может преобразовать написанный вами формат по своим правилам в css (или более популярный). Их появление, можно сказать, очень вовремя и решает некоторые недостатки CSS:

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

Столкнувшись с вышеуказанными проблемами, препроцессор CSS дает вполне реальное решение:

  1. Переменная: Как и другие языки программирования, без многочисленных модификаций.

    • Sass: используйте «$» для объявления переменных и используйте двоеточие для разделения имен переменных и значений переменных.
    • Меньше: используйте "@" для объявления переменных
    • Stylus: В Stylus нет ограничений на объявление переменных, точка с запятой в конце необязательна, но между именем переменной и ее значением должен стоять «знак равенства». Но следует отметить, что если вы объявите переменную с символом "@", Stylus скомпилирует ее, но не присвоит переменной. То есть Stylus не объявляет переменные с "@". Stylus вызывает переменные точно так же, как Less и Sass.

  2. объем: с переменными должна быть возможность управлять ими. Как и js, он будет искать переменные в локальной области видимости.

    • Sass: его способ — худший из трех, нет понятия глобальных переменных
    • Меньше: его метод похож на js, и он находит переменные уровень за уровнем
    • Stylus: его подход похож на Less, но, как и в Sass, имеет тенденцию к более императивному поиску.

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

    • Обработка трех здесь одинакова, с использованием «&» для обозначения родительского элемента.

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

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

метод предшественников

Проблема конфликтов имён CSS имеет долгую историю, можно сказать, что мы, фронтенд-разработчики, каждый день усиленно думаем, как изящно решить эти проблемы. CSS не имеет модульного решения AMD, CMD и модуля ES6, такого как js.

Итак, вернемся к вопросу, как это решить? Наши предшественники также предлагали различные решения:

  1. Object-Oriented CSS
  2. BEM
  3. SMACSS

Можно сказать, что решений бесконечное множество, и внутри команды есть множество решений. Но у большинства есть одна общая черта — селекторы с префиксом.

Это ручная работа, возможно, вам придется вручную писать длинные селекторы, или вы можете использовать предварительно скомпилированный язык css. Однако они, по-видимому, не решают насущной проблемы - чем вызван этот дефицит. Рассмотрим пример, написанный с использованием спецификации БЭМ:

<!-- 正确的。元素都位于 'search-form' 模块内 -->
<!-- 'search-form' 模块 -->
<form class="search-form">
    <!-- 在 'search-form' 模块内的 'input' 元素 -->
    <input class="search-form__input" />
    <!-- 在 'search-form' 模块内的 'button' 元素 -->
    <button class="search-form__button"></button>
</form>

<!-- 不正确的。元素位于 'search-form' 模块的上下文之外 -->
<!-- 'search-form' 模块 -->
<form class=""search-block>
</form>

<!-- 在 'search-form' 模块内的 'input' 元素 -->
<input class="search-form__input"/>

<!-- 在 'search-form' 模块内的 'button' 元素 -->
<button class="search-form__button"></button>

Каждый раз, когда я пишу так, считается, что программист должен работать сверхурочно, ха-ха!

Надежда

Текущая веб-разработка сосредоточена на идее компонентизации, поэтому для завершения разработки веб-компонентов срочно необходим реальный метод модуля CSS. С 2015 года за рубежом стал популярен CSS-in-JS (типичный представитель, стилизованные-компоненты реакции), а еще — CSS Module.

В этой статье речь пойдет о последнем, а если вам нужно понять первое, вы можете сделать это с помощью Google.

Что касается CSS, как всем известно, это язык описания, а динамики нет. Итак, как сформировать модуль. Сначала мы можем посмотреть на пример реакции с использованием postcss:

//example.css

.article {
    font-size: 14px;
}
.title {
    font-size: 20px;
}

После этого зашифруйте эти имена:

.zxcvb{
    font-size: 14px;
}
.zxcva{
    font-size: 20px;
}

Назовите соответствующий контент и поместите его в файл JSON:

{
    "article": "zxcvb",
    "title": "zxcva"
}

После этого в файле js используйте:

import style from 'style.json';

class Example extends Component{
    render() {
        return (
            <div classname={style.article}>
                <div classname={style.title}></div>
            </div>
        )
    }
}

Таким образом изображается прототип модуля css. Конечно, мы не можем каждый раз вручную писать эти вещи. Нам нужны автоматизированные плагины, которые помогут нам в этом процессе. После этого мы должны сначала взглянуть на postCSS.

мне нужно знать тебя

Что такое PostCSS? Возможно, вы подумали бы об этом как о препроцессоре, постпроцессоре и т. д. На самом деле, это ничего. Его можно понимать как подключаемую систему. Использование его введения на домашней странице GitHub:

PostCSS is a tool for transforming CSS with JS plugins. These plugins can support variables and mixins, transpile future CSS syntax, inline images, and more.

Вы можете использовать его с препроцессором или с собственным css. Все это поддерживается, и у него есть огромная экосистема, которую вы могли бы использоватьAutoprefixer, очень популярный плагин для PostCSS, широко используемый такими компаниями, как Google, Shopify, Twitter, Bootstrap и CodePen.

Конечно, мы также можем использовать его в CodePen:

CodePen
CodePen

Здесь рекомендуется посмотретьПодробная серия статей о PostCSS

Далее давайте взглянем на конфигурацию PostCSS:

Здесь мы используем комбинацию webpack+postcss+postcss-loader+cssnext+postcss-import.

Во-первых, мы можем установить эти пакеты через пряжу:

yarn add --dev webpack extract-text-webpack-plugin css-loader file-loader postcss postcss-loader postcss-cssnext postcss-import

Затем настроим webpack.config.js:

const webpack = require('webpack');
const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  context: path.resolve(__dirname, 'src'),
  entry: {
    app: './app.js';
  },
  module: {
    loaders: [
      {
        test: /\.css$/,
        use: ExtractTextPlugin.extract({
          use: [
            {
              loader: 'css-loader',
              options: { importLoaders: 1 },
            },
            'postcss-loader',
          ],
        }),
      },
    ],
  },
  output: {
    path: path.resolve(__dirname, 'dist/assets'),
  },
  plugins: [
    new ExtractTextPlugin('[name].bundle.css'),
  ],
};

Затем настройте postcss.config.js в корневом каталоге.

module.exports = {
  plugins: {
    'postcss-import': {},
    'postcss-cssnext': {
      browsers: ['last 2 versions', '> 5%'],
    },
  },
};

После этого вы можете использовать возможности cssnext в разработке

/* Shared */
@import "shared/colors.css";
@import "shared/typography.css";
/* Components */
@import "components/Article.css";
/* shared/colors.css */
:root {
  --color-black: rgb(0,0,0);
  --color-blue: #32c7ff;
}

/* shared/typography.css */
:root {
  --font-text: "FF DIN", sans-serif;
  --font-weight: 300;
  --line-height: 1.5;
}

/* components/Article.css */
.article {
  font-size: 14px;
  & a {
    color: var(--color-blue);
  }
  & p {
    color: var(--color-black);
    font-family: var(--font-text);
    font-weight: var(--font-weight);
    line-height: var(--line-height);
  }
  @media (width > 600px) {
    max-width: 30em;
  }
}

Наконец, используйте webpack для его компиляции.

Суммировать

PostCSS не очень популярен в Китае, но я верю, что он постепенно станет популярным в ближайшем будущем, а ресурсов в Китае немного, но недавно учителями в пустыне была переведена новая книга - "Углубленный PostCSS Веб-дизайн". Те, кому интересно, также могут ознакомиться и изучить некоторые предисловия. В этой статье лишь приблизительно написано о PostCSS.Ввиду отсутствия отечественных ресурсов, я сделал ссылку на обучающие материалы зарубежных блогов, ссылки будут ниже.

Если у вас есть какие-либо вопросы по поводу того, что я написал, вы можете прокомментировать.Если есть ошибка в том, что я написал, пожалуйста, поправьте меня. Если вам нравится мой блог, подписывайтесь на меня в Star~ Yo. Давайте добиваться прогресса вместе. Добро пожаловать, чтобы следовать за мнойблог на гитхабе

Ссылка на ссылку

PostCSS-modules:
make CSS great again!

PostCSS Deep Dive: What You Need to Know

Реклама: я слышал, что за написание статей можно получить книги от Asynchronous Community.Asynchronous Community, как ведущее книжное сообщество ИТ-специалистов в Китае, мне очень нужны его книги, поэтому я изо всех сил старался написать эту статью, я хочуЭта книга, если вы думаете, что это хорошо, поставьте мне лайк ^-^

Категории