Будущее CSS уже здесь

Автор: Чен Даютоу

гитхаб:KRISACHAN

предисловие

Я недавно слышал о типеприктору3.7Optional Chainingподдержки, а потом я подумал о лесах для рыбьей головыying-templateОбновление версии TS, а затем нашел такое сообщение в командной строке:

«postcss-cssnext» был заменен на «postcss-preset-env». Для получения подробной информации, пожалуйста, проверьтеБилетное увлечение moo.io/blog/…

На самом деле строительные леса рыбьей головы уже давноpostcss-cssnextзаменяетсяpostcss-preset-env, но я его не удалял, но увидев это предложение, мне стало любопытно, и я пошел его искатьPostCSSОфициальный сайт, а потом задумался о развитии CSS на протяжении многих лет, и вышла эта статья.

Говоря о современном CSS

с 1997 г.CSS1.0С момента своего выпуска CSS прошел 22 года, от поддержки простого набора текста до возможности делать крутые 3D-анимации, его развитие показано на рисунке ниже:

[Изображение изMDN]

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

С возрастающей сложностью и диверсификацией веб-бизнеса интерфейсная разработка также изменилась с простой веб-страницы на веб-приложение, и здесь родилась концепция «интерфейсной разработки». Полное веб-приложение часто бывает очень большим и сложный, и даже будет много людей, чтобы поддерживать его вместе.В прошлом написания jQuery было недостаточно для поддержки современных потребностей. То же самое верно и для CSS, больше не нужно писать несколько встроенныхmargin,paddingИли достаточно внедрить в HTML несколько CSS, а в связи с увеличением штатов также необходимо учитывать различную разработку, соглашения об именах и конфликтуют ли стили.

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

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

Оригинальная модульность CSS — Правила именования CSS

Именование всегда было головной болью разработчиков.Во фронтенде помимо именования различных JS-переменных есть еще именование классов элементов.Хотя мы можем называть их по желанию, мы можем даже использовать их, если захотим..a .b .cОжидание бессмысленных правил для названия, но если оно названо в долгосрочном, крупномасштабном или совместном проекте с участием нескольких человек, я боюсь, что его легко победить. На этот раз мы поделимся правилами именования, обычно используемыми в отрасли для предотвращения побоев.

OOCSS(Object-Oriented CSS)

OOCSS имеет два принципа написания:

Разделение структуры и стиля
Разделение контейнера и содержимого

Рассмотрим пример с официального сайта:

<div class="mod grab"> 
    <b class="top">
        <b class="tl"></b>
        <b class="tr"></b>
    </b> 
    <div class="inner">
        <div class="hd">
            <h3>grab</h3>
        </div>
        <div class="bd">
            <p>Body</p>
        </div>
    </div>
    <b class="bottom">
        <b class="bl"></b>
        <b class="br"></b>
    </b> 
</div>

это здесь.modродительский класс, от которого наследуются все классы,.grabявляется подклассом.

Что касается.top,.innerиbottom, как следует из названия, являются подблоками в разных позициях.

Вот "контейнер" как номенклатура.

BEM

БЭМ — это набор слов для Блока, Элемента и Модификатора.

В селекторе мы используем следующие три символа для представления вышеуказанного содержимого.

-Тире: используется только как дефис, обозначающий соединительный знак между несколькими словами блока или подэлемента.
__Двойное подчеркивание: двойное подчеркивание используется для соединения блоков и подэлементов блоков.
_Одиночное подчеркивание: одно подчеркивание используется для описания состояния блока или подэлемента блока.

нравится:type-block__element_modifier

Пример официального сайта выглядит следующим образом:

<style>
    .button {
        display: inline-block;
        border-radius: 3px;
        padding: 7px 12px;
        border: 1px solid #D5D5D5;
        background-image: linear-gradient(#EEE, #DDD);
        font: 700 13px/18px Helvetica, arial;
    }
    .button--state-success {
        color: #FFF;
        background: #569E3D linear-gradient(#79D858, #569E3D) repeat-x;
        border-color: #4A993E;
    }
    .button--state-danger {
        color: #900;
    }
</style>
<button class="button">
	Normal button
</button>
<button class="button button--state-success">
	Success button
</button>
<button class="button button--state-danger">
	Danger button
</button>

SMACSS

SMACSS, правило, очень похожее на OOCSS.

Ядро имеет только следующие 6:

База: основные правила именования стилей для страницы.
Макет: правила именования макетов
Модуль: Правила именования модулей
Штат: правила именования штатов
Тема: Правила именования тем
Изменение состояния: правила именования изменяемых состояний

модификатор--, подмодуль__

Пример официального сайта выглядит следующим образом:

<style>
    #header { … }
    #primarynav { … }
    #maincontent { … }
</style>
<div id="header"></div>
<div id="primarynav"></div>
<div id="maincontent"></div>

Включение CSS — препроцессоры

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

sass

Sass — самый ранний, самый зрелый, стабильный и мощный профессиональный язык расширений CSS в мире! (На официальном сайте написано (О_о)?? )

sass может использовать концепции, уникальные для языков программирования, такие как переменные, вложенные правила, микшеры, наследование и т. д. Пример кода выглядит следующим образом:

$nav-color: #F90;
nav {
  $width: 100px;
  width: $width;
  color: $nav-color;
}

//编译后

nav {
  width: 100px;
  color: #F90;
}

less

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

Пример кода выглядит следующим образом:

@base: #f938ab;

.box-shadow(@style, @c) when (iscolor(@c)) {
  -webkit-box-shadow: @style @c;
  box-shadow:         @style @c;
}
.box-shadow(@style, @alpha: 50%) when (isnumber(@alpha)) {
  .box-shadow(@style, rgba(0, 0, 0, @alpha));
}
.box {
  color: saturate(@base, 5%);
  border-color: lighten(@base, 30%);
  div { .box-shadow(0 0 5px, 30%) }
}

// 编译后
.box {
  color: #fe33ac;
  border-color: #fdcdea;
}
.box div {
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}

stylus

Стилус, выразительный, динамичный, надежный CSS

Пример кода выглядит следующим образом:

body
  font 12px Helvetica, Arial, sans-serif

a.button
  border-radius 5px

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

Быть как волшебник - CSS Houdini

Иногда я вижу новые свойства из CSS, но из-за проблем с совместимостью браузера я могу только видеть их, но не могу их использовать.Даже если некоторые свойства можно использовать, возникают неожиданные ошибки из-за фактической ситуации в каждом браузере.Значит ли это что после того, как собственность выходит, нам нужно ждать 5 или более лет, прежде чем мы сможем ее использовать? 9012 лет?

Конечно нет, тогда мы сможем узнать об этом волшебном существовании - CSS Houdini

Что такое CSS Гудини?

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

[Изображение из:Woohoo. QED42.com/blog/build i…]

Как показано выше, разные API соответствуют разным ссылкам рендеринга браузера, которые являются функциями-ловушками разных жизненных циклов при загрузке браузера.

Проще говоря, CSS Houdini — этоJS IN CSS, милота..

Как работает CSS Houdini?

Вот 7 API, к которым у нас есть доступ:

Typed OM API
Properties & Values API
Paint API
Layout API
Animation worklet
Parser API
Font Metrics API

Мммм, хотя есть 7 API (некоторые есть на драфтах Houdini), фактическая поддержка браузерами выглядит следующим образом:

[Изображение из:ishoudinireadyyet.com/]

Рабочий процесс CSS Houdini выглядит следующим образом:

[Изображение из:Woohoo. QED42.com/blog/build i…]

Подключиться к процессу рендеринга
JS — ядро этого хука
Используя Typed OM JS, вы можете монтировать пользовательские свойства, рисовать графику, макеты и анимацию.
Есть еще два API: Parser API и Font Metrics API. Они используются для регистрации новых вещей, связанных с CSS.

Некоторые примеры

В этой статье мы не будем подробно рассказывать о CSS Houdini, поэтому я не буду рисовать все ДЕМО. Если вам интересно, вы можете проверить «Источники» внизу, чтобы получить более подробную информацию.

Typed OM

<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        background: linear-gradient(to right, #2c3e50, #4ca1af);
    }
</style>
<div class="box" id="box"></div>
<script>
    'use strict'
    box.attributeStyleMap.set('width', CSS.px(200))
    box.attributeStyleMap.set('height', CSS.px(200))
    const [x, y] = 'width,height'
    .split(',')
    .map(val => Number.parseInt(box.computedStyleMap().get(val)))
    box.attributeStyleMap.set('transform', new CSSTranslate(CSS.px(x), CSS.px(y)))
    console.log(box.computedStyleMap().get('transform'))
    console.log(window.getComputedStyle(box, null)['transform'])
</script>

Выше приведен пример Typed OM, здесь стоит упомянуть, что если мы используемgetComputedStyleполучитьtransformЗначение , конечным результатом является матрица, которая нам не очень удобна для выполнения второстепенных операций, но с использованием JS API Typed OMcomputedStyleMap, полученный результат представляет собой набор определенных атрибутов, который нам очень полезен для выполнения второстепенных операций.

Paint API

Paint API позволяет вам писать стили CSS, такие как свойства Canvas, и использование очень простое, мы можем видетьslides.iamvdo.me/waq19/#/35пример выше

Сначала мы создаем новый файл с именемregisterPaint.js, напишите в нем следующий код:

registerPaint('circle-ripple', class {
  static get inputProperties() { return [ '--circle-color',
    '--circle-radius', '--circle-x', '--circle-y'
  ]}
  paint(ctx, geom, props, args) {
    const x = props.get('--circle-x').value;
    const y = props.get('--circle-y').value;
    const radius = props.get('--circle-radius').value;
  }
}

Затем создайте новыйindex.html, и прописать написанное выше в коде JSregisterPaint.js, следующее:CSS.paintWorklet.addModule('registerPaint.js');

Конкретный код выглядит следующим образом:

<style>
    .el {
          --circle-radius: 0;
          --circle-color: deepskyblue;
          background-image: paint(circle-ripple);
    }
    .el.animating {
          transition: --circle-radius 1s,
                      --circle-color 1s;
          --circle-radius: 300;
          --circle-color: transparent;
    }
</style>
<div class="el" id="el"></div>
<script>
    'use strict'
    CSS.paintWorklet.addModule('registerPaint.js');
    el.addEventListener('click', e => {
          el.classList.add('animating');
          el.attributeStyleMap.set('--circle-x', e.offsetX);
          el.attributeStyleMap.set('--circle-y', e.offsetY);
    });
</script>

Таким образом, мы имеем следующий эффект:

Вавилон CSS - PostCSS

В конце концов, CSS Houdini на самом деле просто JS В CSS, а не чистый CSS, поэтому для некоторых новых свойств CSS, если мы используем их вместе, нам действительно нужно ждать 5 лет? И даже если есть различные инструменты, но нет совместимых методов написания, вендорных префиксов, циклов и нативного CSS, не приходится ли нам полагаться на препроцессоры CSS?

На самом деле нет, в настоящее время мы можем использовать Babel CSS — PostCSS.

Что такое PostCSS?

Проще говоря, PostCSS — это процессор, позволяющий разработчикам использовать JS для обработки CSS, который делится на следующие пять категорий:

Улучшить читаемость кода

Префиксы конкретных поставщиков для правил CSS с использованием данных, полученных с веб-сайта Can I Use.AutoprefixerАвтоматически получайте сведения о популярности браузера и поддерживаемых свойствах, а также автоматически добавляйте префиксы правил CSS на основе этих данных.