PostCSS действительно полезен!

CSS
PostCSS действительно полезен!

существуетОфициальный сайт PostCSSПри таком знакомстве с функциями PostCSS за стрелкой скрывается подключаемый модуль, соответствующий функции, и ее адрес на github.

  • повысить читаемость кода →Autoprefixer
  • Используйте CSS завтрашнего дня уже сегодня →postcss-cssnext
  • Конец глобального CSS →postcss-modules
  • Избегайте ошибок в CSS →stylelint
  • Мощная сетка CSS → потеряно →lost

PostCSS — это инструмент, который использует плагины для преобразования CSS.Существует много очень полезных плагинов, таких как autoprefixer, cssnext и модули CSS. Перечисленные выше функции реализуются соответствующими плагинами postcss. А использование PostCSS необходимо сочетать с веб-пакетом или посылкой. Как использовать PostCSS в Parcel: Добавьте файл конфигурации .postcssrc(JSON), .postcssrc.js или postcss.config.js. Возьмем в качестве примера файл .postcssrc:

{
  "modules": true,
  "plugins": {
    "autoprefixer": {
      "grid": true
    }
  }
}

Плагины указываются как ключи в объекте плагинов и используют значение объекта для определения параметров. Если у плагина нет опции, просто установите для нее значение true . Ниже я представлю каждый плагин один за другим в соответствии с демо-версией официального файла readme и добавлю некоторые пояснения к знаниям, скрытым за плагином.

1. Что такое автопрефиксер?

Сначала уточните, что Autoprefixer — это плагин PostCSS, который анализирует CSS в соответствии с тем, можно ли его использовать, и добавляет к нему префиксы поставщиков браузеров. Обычный способ записи без префикса производителя.

::placeholder {
    color: gray;
}

Autoprefixer будет использовать данные функций и атрибутов на основе текущей поддержки браузера, чтобы префиксировать вас. Вы можете попробовать демо Autoprefixer:autoprefixer.github.io/ imageКак видно из приведенного выше рисунка, Autoprefixer не будет префиксировать атрибуты css2.1 display, position и т. д., которые полностью соответствуют стандарту W3C без различий браузера, в то время как преобразование атрибута css3 будет префиксом, из которых -- webkit является префиксом chrome и safari, а --ms является префиксом т. е. Например, firefox реализовал стандартизацию преобразования W3C, поэтому преобразование можно использовать.

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

Если у вас есть сомнения по поводу префикса поставщика, вы можете зайти в этот мой блог:rem / Vender Prefix / CSS extensions

2. Что такое postcss-cssnext?

ввод синтаксиса postcss-cssnext:

:root {
  --fontSize: 1rem;
  --mainColor: #12345678;
  --centered: {
      display: flex;
      align-items: center;
      justify-content: center;
  };
}
body {
    color: var(--mainColor);
    font-size: var(--fontSize);
    line-height: calc(var(--fontSize) * 1.5);
    padding: calc((var(--fontSize) / 2) + 1px);
}
.centered {
    @apply --centered;
}

Вывод синтаксиса, доступного в браузере:

body {
    color: rgba(18, 52, 86, 0.47059);
    font-size: 16px;
    font-size: 1rem;
    line-height: 24px;
    line-height: 1.5rem;
    padding: calc(0.5rem + 1px);
}
.centered {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
}

После беглого просмотра демо,CSS next.IO/playground/…Хорошо то, что var() и calc() используются для вычисления значения свойств CSS.Существуют также способы применения правил больших абзацев, такие как @apply, и вы также можете использовать это, чтобы узнать о некоторых новых возможностях черновика CSS. ; он не прост в использовании. Существует определенная стоимость обучения, и требуется определенное время для объединения с веб-пакетом, глотком и посылкой на ранней стадии, и если присоединяются новые члены команды внешнего интерфейса, вы должны освоить синтаксис этого cssnext. Кажется, это попытка превратить css в язык, который можно логически обрабатывать, но я лично не думаю, что это хорошая идея использовать cssnext на работе для такого языка, как css, который является гибким, требует конкретного мышления и требует много усилий. отладки Выбор, но его можно использовать как запись для изучения новых возможностей черновика CSS после работы, а затем использовать его, пока он не будет включен в стандарт.

Сначала я не был уверен в своих мыслях, поэтому пошел посмотреть мысли своих предшественников, среди них мысли Гу Тилинга о cssnext были такими же, как и у меня:

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

Напротив, Autoprefixer имеет более практическое значение, и то, как браузер будет реализовывать функцию, реализованную cssnext, все еще сомнительно, и я чувствую, что в нее можно только играть.

3. Что такое postcss-модули?

Прежде чем перейти к postcss-modules, первое, что нужно прояснить, это концепция CSS-модулей.Что касается CSS-модулей, вы можете прочитать статью, которую я перевел:【Перевод】Что такое CSS-модули? Зачем они нам нужны?

postcss-modules — плагин реализации CSS-модулей на PostCSS, вот статья о postcss-модулях, написанная самим автором плагина:PostCSS-modules:make CSS great again!.

В моем ограниченном опыте разработки я использовал модули css только в реакции, а не в vue и angularjs, и при использовании в реакции я не буду использовать плагин postcss-modules, а использоватьreact-css-modulesЭта идея CSS-модулей — это плагин в реакции.

Самый простой вводный пример приведен ниже: В контексте React модули CSS могут быть написаны так:

import React from 'react';
import styles from './table.css';

export default class Table extends React.Component {
    render () {
        return <div className={styles.table}>
            <div className={styles.row}>
                <div className={styles.cell}>A0</div>
                <div className={styles.cell}>B0</div>
            </div>
        </div>;
    }
}

Окончательная метка отображаемого компонента будет выглядеть так:

<div class="table__table___32osj">
    <div class="table__row___2w27N">
        <div class="table__cell___1oVw5">A0</div>
        <div class="table__cell___1oVw5">B0</div>
    </div>
</div>

Если у вас есть сомнения по поводу того, почему имя класса скомпилировано в виде table__table___32osj, вам нужно сначала разобраться с модулями css:【Перевод】Что такое CSS-модули? Зачем они нам нужны?

Если вам нужно использовать WebPack в среде разработки или производственной среде, вы можете прочитать его.react-css-modulesОфициальная документация для ответа.

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

4. Что такое stylelint?

Это инструмент, используемый для того, чтобы заставить разработчиков писать стили CSS в соответствии со спецификациями CSS команды, подобно eslint. Чтобы использовать его, просто включите правило.

Выдержка из сообщения в блоге автора stylelint:

Верно, ваша команда могла где-то задокументировать рекомендации по стилю кода команды в текстовой вики. Но есть человеческий фактор, который нельзя упускать из виду: люди все время делают ошибки — всегда непреднамеренно.

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

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

Мы в основном ориентируемся наРаздел правил: Существует три основных типа правил sytlelint, и в качестве примера я выберу по одному правилу из каждого типа.

  • Возможные ошибки (распространенное неправильное написание, настоятельно рекомендуется открыть)

  • Ограничение языковых функций (устарело некоторое правильное написание, рекомендуется открыть среду)

  • Стилистические проблемы (код стиля кода унифицирован, обычно рекомендуется открывать)

  • Возможные ошибки ------ color-no-invalid-hex: запретить недопустимые шестнадцатеричные цвета

Полный шестнадцатеричный цвет может состоять из 6 или 8 (7, 8 бит — значение прозрачности) символов. Также их сокращения могут состоять из 3 или 4 символов. варианты: правда Следующий код нарушает правила:

a { color: #00; }
a { color: #fff1az; }
a { color: #12345aa; }

Следующий код соответствует правилам:

a { color: #000; }
a { color: #000f; }
a { color: #fff1a0; }
a { color: #123450aa; }
  • Ограничить возможности языка ------ color-no-hex: запретить шестнадцатеричные цвета

варианты: правда Цвета в шестнадцатеричном формате противоречат правилам:

a { color: #000; }
a { color: #fff1aa; }
a { color: #123456aa; }

Недопустимые шестнадцатеричные цвета также недопустимы:

a { color: #foobar; }
a { color: #0000000000000000; }

Соблюдаются следующие правила:

a { color: black; }
a { color: rgb(0, 0, 0); }
a { color: rgba(0, 0, 0, 1); }
  • Стилистические проблемы ------ color-hex-case: автоматическое преобразование шестнадцатеричных цветов в верхний или нижний регистр

Строка параметров: "нижний"|"верхний" можно использоватьstylelint "foo/*.css" --fixдостичь той же функции. "нижний регистр" Следующий код является незаконным:

a { color: #FFF; }

Соблюдаются следующие правила:

a { color: #000; }
a { color: #fff; }

"столица" Следующий код является незаконным:

a { color: #fff; }

Соблюдаются следующие правила:

a { color: #000; }
a { color: #FFF; }

Дополнительные правила stylelint можно найти по адресу:GitHub.com/style Lintong/ это…

5. Что такое LostGrid?

Lost Grid — это мощная система сетки PostCSS, которая работает с любым препроцессором, даже с родным CSS. Здесь есть очень хорошая демонстрация:Lost grid.org/lost grid - отвратительно...

Выберите 2 демонстрации для иллюстрации.

.ColumnSection__grid div {
    lost-column: 1/1;
}
@media (min-width: 400px) {
    .ColumnSection__grid div {
        lost-column: 1/3;
    }
}
@media (min-width: 900px) {
    .ColumnSection__grid div {
        lost-column: 1/6;
    }
}

При размере более 900 пикселей:imageЕсли меньше 900 пикселей:image

.NestingSection__grid {
    background: #8eb19d;
}

.NestingSection__grid div {
    background: #7ba48d;
    lost-column: 1/3;
}
.NestingSection__grid div div {
    background: #68977c;
    lost-column: 1/2;
}

image

Изучив стиль css, мы обнаружили, что макет таблицы, псевдоэлементы до/после, селекторы css и макет рамки используются умело, но на самом деле наиболее важной частью является правильное использование самого css. layout и BFC для разных ситуаций используют большое количество стилей внутри плагина для ограничений.image

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

Будем рады общению с вами и совместному прогрессу:

  • Публичный аккаунт WeChat: Dada Front-end/excellent_developers
  • Группа общения WeChat: 1 группа большого внешнего общения (добавьте wechat gaokai20100801, чтобы присоединиться к группе)

Стремитесь стать отличным front-end инженером!

Категории