Благодаря постоянному совершенствованию интерфейсной разработки препроцессор CSS стал неотъемлемой частью проекта. Многие люди выбирают препроцессор CSS в первую очередь на этапе выбора технологии проекта. Большая часть интерфейсной инженерной основы также встроена серии шаблонов для препроцессора CSS, все привыкли наслаждаться гибкостью и плавностью написания кода, обеспечиваемыми препроцессором CSS, но оставили нативный CSS в дураках.
Возможно, многие фронтенд-разработчики до сих пор думают, что препроцессор CSS — это относительно новая технология, но на самом деле это не так.Прошло 12 лет с тех пор, как в 2007 году родился самый ранний препроцессор CSS Sass, а относительно новый Stylus также был выпущен для 9 лет. .
Стек интерфейсных технологий развивался как на дрожжах, и рабочая группа W3C по CSS постоянно привлекала питательные вещества от сообщества, чтобы ускорить итерацию CSS. Итак, может ли CSS заменить препроцессоры CSS? Будут ли препроцессоры CSS продуктом переходного периода CSS?
Представляем W3C
CSS — один из основных языков открытой сети,Спецификация W3CСтандартизируйте браузеры. Поэтому, прежде чем погрузиться в процесс обновления спецификаций CSS, необходимо понять W3C и процесс разработки его спецификаций.
W3C, также известный как Консорциум World Wide Web (Консорциум World Wide Web), также известный как Совет W3C, является основной международной организацией по стандартизации для World Wide Web. Это квазиавтономная неправительственная организация. Зависит отТим Бернерс-ЛиОснована в октябре 1994 года в Лаборатории компьютерных наук и искусственного интеллекта Массачусетского технологического института (MIT/LCS) Массачусетского технологического института.
W3C разрабатывает набор стандартов и призывает разработчиков веб-приложений и поставщиков контента следовать им. Содержание стандарта включает в себя спецификацию используемого языка, руководящие принципы, используемые при разработке, поведение механизма объяснения и т. д. W3C разработалHTML,DOM,SVG,XMLа такжеCSSи многие другие далеко идущие стандартные спецификации.
Процесс разработки спецификации W3C
Поскольку далее нам нужно поговорить о спецификациях CSS на разных этапах, здесь необходимо кратко представить процесс разработки спецификаций W3C.
Согласно W3CProcess Document, разработка Рекомендации должна пройти несколько этапов.
Основные этапы:
- WD Рабочий проект
- Рекомендация кандидата CR (рекомендация кандидата)
- Рекомендация предложения по связям с общественностью (рекомендация)
- Рекомендация REC W3C (рекомендация W3C)
Из-за ограниченного места я не буду здесь подробно объяснять стандартный процесс W3C.Если вы хотите узнать больше о стандартном процессе и организационной структуре W3C, вы можете проверитьСтандартный процесс и организационная структура W3C.
История CSS
HTML и CSS настолько неразделимы, что вы можете подумать, что они появляются вместе. На самом деле, с тех пор, как Тим Бернерс Ли изобрел Интернет в 1989 году, в этом мире не существовало такой вещи, как CSS (не говоря уже о препроцессоре CSS), а первоначальная версия Интернета вообще не предлагала никаких украшений для веб-методов.
Хотя спецификация HTML определяет теги, которые должны использоваться для заголовков и абзацев на веб-страницах, она не включает в себя стиль (например, размер, положение, интервал, отступ и т. д.), в котором это содержимое должно отображаться в браузере.
Однако всего через 10 лет CSS был полностью принят современным веб-сообществом, и в этот период произошла серия интересных историй, если вам интересно, можете посмотреть.A Look Back at the History of CSS.
CSS1
В 1994 г.Хокон Виум Лиа такжеБерт БосСотрудничество Дизайн CSS. Сначала они впервые демонстрируют CSS впервые на встрече в Чикаго в 1994 году.
Требования CSS1, опубликованные в декабре 1996 года, имеют первую версию, которая в основном определяет несколько основных частей селекторов, атрибутов стиля, псевдоклассов и объектов.
CSS2
CSS2 был выпущен W3C в мае 1998 года. Спецификация CSS2 была разработана на основе CSS1, расширяя и улучшая многие более мощные свойства. Включает в себя селекторы, модели позиций, макеты, стили таблиц, типы мультимедиа, псевдоклассы, стили курсора.
Cascading Style Sheets Level 2 Revision 1, обычно называемый «CSS 2.1», исправляет ошибки в CSS 2, удаляет плохо поддерживаемые или не полностью совместимые функции и добавляет в спецификацию реализованные расширения браузера. CSS 2.1 в течение многих лет колебался между статусом рабочего проекта (WD) и статусом кандидата в рекомендации (CP), чтобы соответствовать процессу стандартизации технических спецификаций W3C.
CSS 2.1 был впервые представлен 25 февраля 2004 г.Кандидат в рекомендации (CR) стандарт, но вернулся к рабочему проекту (WD) 13 июня 2005 г. для дальнейшего рассмотрения. Он вернулся к стандарту рекомендаций кандидатов (CP) 19 июля 2007 г., а затем дважды обновлялся в 2009 г. Однако с исправлениями и разъяснениями он снова вернулся в рабочий проект «Последнего звонка» от 7 декабря 2010 г.
CSS3
CSS3 — это последняя версия языка каскадных таблиц стилей, разработанная для расширения CSS2.1.
Уровню CSS 2 потребовалось 9 лет (с августа 2002 г. по июнь 2011 г.), чтобы получить статус «Рекомендация», главным образом потому, что его сдерживали некоторые незначительные особенности. Чтобы ускорить стандартизацию функций, которые были идентифицированы как не имеющие проблем, W3CCSS Working Groupввел термин под названиемBeijing doctrineРешение разделить CSS на множество небольших компонентов, называемых модулями. Эти модули независимы друг от друга и стандартизированы в своем собственном темпе. Некоторые из них уже имеют статус рекомендаций W3C, а некоторые все еще находятся на ранней стадии разработки. При выявлении новых требований новые модули добавляются таким же образом.
Формально,Самого стандарта CSS3 больше не существует. Каждый модуль стандартизирован независимо, и теперь стандартный CSS включает пересмотренный CSS2.1 и его расширение полным модулем Количество уровней модулей не соответствует. Моментальный снимок может быть определен для стандарта CSS в каждый момент времени, в котором перечислены CSS 2.1 и зрелые модули.
W3C будет регулярно публиковать эти моментальные снимки, такие как2007, 2010, 2015или2017.
До сих пор не были стандартизированы модули выше уровня 3, это должно измениться в будущем. Однако некоторые модули, такие как Selectors 4 или CSS Borders and Backgrounds Level 4, уже имеют редакционный черновик, даже если они не достигли статуса первого опубликованного рабочего черновика.
Вот картинка, которая может более наглядно представить текущую классификацию и статус модулей CSS3:
Вопрос: Почему нет CSS4? Не существует единой интегрированной спецификации CSS4, поскольку она разделена на отдельные модули «уровня 4». Уровень 4 не равен CSS 4. Например, пользовательские свойства CSS для модуля каскадных переменных уровня 1 нельзя назвать CSS1.
Препроцессор CSS
С момента рождения CSS базовый синтаксис и основной механизм принципиально не изменились, в течение длительного периода времени его развитие сводилось практически исключительно к улучшению выразительности.
Вначале роль CSS на веб-страницах была лишь вспомогательным украшением, а самым большим требованием была легкость и простота в освоении, однако сложность сегодняшних веб-сайтов уже не та, и собственный CSS лишил разработчиков возможности делать то, что нужно. они хотят.
Когда язык недостаточно мощный, а пользовательская среда выполнения не поддерживает другие параметры, этот язык становится «целевым языком компиляции». Разработчики выберут другой язык более высокого уровня для разработки, а затем скомпилируют его на язык низкого уровня для фактического запуска. В результате, в области фронтенда все зависит от людей, и появился препроцессор CSS.
Расцветает сто цветов
Препроцессор CSS — это программа, позволяющая генерировать CSS с использованием собственного уникального синтаксиса препроцессора.
Существует множество препроцессоров CSS на выбор, и большинство препроцессоров CSS добавляют некоторые дополнительные функции, которых нет в родном CSS или которые несовершенны.Эти функции делают структуру CSS более читабельной и простой в обслуживании. Препроцессоры CSS, представленные текущим сообществом, в основном следующие:
- Sass: Созданный в 2007 году, это самый ранний и наиболее зрелый препроцессор CSS. Он поддерживается сообществом Ruby и Compass, самой мощной структурой CSS. В настоящее время он находится под влиянием LESS и превратился в SCSS, который полностью совместим с CSS.
- Less: Появился в 2009 году, сильно повлиял на SASS, но использует синтаксис CSS, что упрощает начало работы для большинства разработчиков и дизайнеров. Сторонники за пределами сообщества Ruby намного превосходят SASS. Недостатком является то, что по сравнению с SASS программируемой функции недостаточно. , но преимущество в том, что он прост и совместим с CSS, что, в свою очередь, влияет на эволюцию SASS в эпоху SCSS.Знаменитый Twitter Bootstrap использует LESS в качестве базового языка.
- Stylus: Stylus — это фреймворк для предварительной обработки CSS, созданный в 2010 году сообществом Node.js, в основном используемый для поддержки предварительной обработки CSS для проектов Node, поэтому Stylus — это новый язык, который может создавать надежный, динамичный, выразительный Powerful CSS. Относительно молодой, он по сути делает что-то похожее на SASS/LESS и т. д.,
преимущество
Хотя различные препроцессоры являются мощными, наиболее часто используемыми являются следующие функции: переменные, примеси, вложенные правила и модули.
Затем возьмите Sass в качестве примера, чтобы показать реализацию этих основных функций в препроцессоре:
Variables and Operators (+, -, *, /, %)
$font-size: 10px;
$font-family: Helvetica, sans-serif;
body {
font: $font-size $font-family;
}
.mark{
font-size: 1.5 * $font-size;
}
Mixins
@mixin clearfix {
&:after {
display: block;
content: '';
clear: both;
}
}
.sidebar{
@include clearfix;
}
Nesting
// menu
.nav {
> li {
> a:hover {
background-color: red;
}
}
}
Modules
@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';
недостатки или недостатки
Дополнительная конфигурация сборки
Перед написанием стиля необходимо сделать дополнительную работу для компиляции конфигурации,sass-nodeУстановка и скомпилированная конфигурация могут заманить в ловушку группу новичков.
Стоимость компиляции
Каждый раз, когда код изменяется, его необходимо перекомпилировать, что требует времени и ресурсов ЦП.
стоимость обучения
Различный синтаксис препроцессора CSS отличается, что увеличивает стоимость обучения. Несколько препроцессоров стилей могут использоваться одновременно в одной команде или даже в одном проекте.
// Sass
$color: #f00;
$images: "../img";
@mixin clearfix {
&:after {
content: " ";
display: block;
clear: both;
}
}
body {
color: $color;
background: url("#{images}/1.png");
@include clearfix;
}
// Less
@color: #f00;
@images: "../img";
.clearfix() {
&:after {
content: " ";
display: block;
clear: both;
}
}
body {
color: @color;
background: url("@{images}/1.png");
.clearfix;
}
отладка
При использовании препроцессора CSS мы обычно настраиваем SourceMap, чтобы помочь отладочной обработке, но даже если это так, некоторые отладки все еще понесены:
Вернуться к CSS
В процессе обновления и итерации функции различных препроцессоров CSS становятся все более и более сложными, но основные функции, используемые большинством людей, остаются прежними: переменные, микширование, вложенные, модуль и, самое большее, некоторые функции класса инструментов.
Нам нужны преимущества препроцессора без затрат и недостатков, которые он приносит. Есть ли способ получить лучшее из обоих миров? CSS черпает питательные вещества из сообщества, чтобы ускорить эволюцию и итерацию на протяжении многих лет. Можем ли мы найти ответ в стандартах CSS?
Variables in CSS
Пользовательские свойства CSS, также известные как переменные CSS, позволяют вам самостоятельно объявлять переменные в стилях и передаватьvar()использование функции.
CSS Custom Properties for Cascading VariablesСпецификация была впервые представлена в виде рабочего проекта (WD) в октябре 2012 года, а в октябре 2015 года достигла стадии «Критерии рекомендации-кандидата» (CR). Поддержка браузеров сейчас близка к 93%.
Ниже приведены определение и использование переменных CSS, а типы, которые могут быть определены, чрезвычайно богаты.
/* declaration */
--VAR_NAME: <declaration-value>;
/* usage */
var(--VAR_NAME)
/* root element selector (global scope), e.g. <html> */
:root {
/* CSS variables declarations */
--main-color: #ff00ff;
--main-bg: rgb(200, 255, 255);
--logo-border-color: rebeccapurple;
--header-height: 68px;
--content-padding: 10px 20px;
--base-line-height: 1.428571429;
--transition-duration: .35s;
--external-link: "external link";
--margin-top: calc(2vh + 20px);
}
body {
/* use the variable */
color: var(--main-color);
}
В отличие от обработки переменных препроцессора SASS во время компиляции, переменные CSS обрабатываются браузером во время выполнения, поэтому переменные CSS являются более мощными и гибкими.
Operators
можно использоватьcalc()Расчет
:root {
--block-font-size: 1rem;
}
.block__highlight {
/* WORKS */
font-size: calc(var(--block-font-size)*1.5);
}
Generate Colors
Может использоваться для генерации и вычисления цветов из таких функций, как RGB:Generate Colors
CSS to JS
До появления переменных CSS передача значений из CSS в JS была очень сложной и даже требовала некоторых хакерских приемов. Теперь с переменными CSS вы можете получить значение переменной и изменить его напрямую через JS:
.breakpoints-data {
--phone: 480px;
--tablet: 800px;
}
const breakpointsData = document.querySelector('.breakpoints-data');
// GET
const phone = getComputedStyle(breakpointsData)
.getPropertyValue('--phone');
// SET
breakpointsData.style
.setProperty('--phone', 'custom');
Custom Theme
Настраивать и динамически переключать темы сайта легко и удобно с помощью переменных CSS:
Сначала определите переменные в разных темах, а затем напишите стиль в обычном режиме.
html {
--hue: 210; /* Blue */
--text-color-normal: hsl(var(--hue), 77%, 17%);
...
}
html[data-theme='dark'] {
--text-color-normal: hsl(var(--hue), 10%, 62%);
...
}
Меняйте атрибуты элементов через JS, динамически переключайте темы:
document.documentElement.setAttribute('data-theme', 'dark')
document.documentElement.setAttribute('data-theme', 'light')
Для более продвинутого использования см.:CSS custom properties (native variables) In-Depth
Почему определение переменной начинается с
--начало? Вот почему:Let's Talk about CSS Variables
Mixins in CSS
Есть предложение по CSS:CSS @apply Rule, согласно черновому описанию, пользователи могут напрямую использовать переменные CSS для хранения блоков объявлений, а затем передавать@apply ruleиспользовать.
:root {
--pink-schema: {
color: #6A8759;
background-color: #F64778;
}
}
body{
@apply --pink-schema;
}
Жаль, что это предложение было заброшено.Если вас интересуют конкретные причины отказа, вы можете прочитать эту статью:Why I Abandoned @apply.
Хотя Mixins в настоящее время не имеет хороших стандартов реализации для CSS, мы твердо верим, что рано или поздно появятся лучшие спецификации, чтобы заполнить этот пробел в CSS.
Nesting in CSS
В CSS уже есть спецификация для вложенности, хотя она находится только на стадии «Черновик редактора»:CSS Nesting Module Level 3
можно увидеть поCSS Nesting Module, спецификация Nesting в основном такая же, как у препроцессора.
/* Dropdown menu on hover */
ul {
/* direct nesting (& MUST be the first part of selector)*/
& > li {
color: #000;
& > ul { display: none; }
&:hover {
color: #f00;
& > ul { display: block; }
}
}
}
Module in CSS
На самом деле в CSS очень рано появилось модульное решение, т.@importИспользуя правила CSS @Import, вы можете ссылаться на другие стили файлов. Эта особенностьIE 5.5Поддерживается всеми браузерами с самого начала, так что почему пользователей было очень мало, причин много:
- Ошибка порядка загрузки в некоторых старых браузерах
- Невозможно загрузить параллельно
- в результате чрезмерное количество запросов
- ......
Однако сейчас у всех интерфейсные проекты перед выходом в онлайн в основном упаковываются с помощью инструментов сборки (Gulp, Webpack и т. д.), поэтому вышеперечисленных недостатков не существует, а в Webpackcss-loaderВ, можно настроить, открывать ли@importиз.
Selector Helpers
В дополнение к некоторым основным функциям, описанным выше, CSS также предоставляет несколько совершенно новых функций, которые помогут вам писать более элегантно.
:matches pseudo-class
Переименовано в :is()
:matches()Функция псевдокласса CSS принимает список селекторов в качестве параметра и выбирает любой элемент в списке, который может выбрать любой селектор, что полезно для написания больших селекторов в более компактной форме, а поддержка браузерами близка к 93%.
/* 语法 */
:matches( selector[, selector]* )
.nav:matches(.side,.top) .links:matches(:hover, :focus) {
color: #BADA55;
}
/* 相当于以下代码 */
.nav.side .links:hover,
.nav.top .links:hover,
.nav.side .links:focus,
.nav.top .links:focus {
color: #BADA55;
}
Для более подробной информации ознакомьтесь со спецификацией:Selectors Level 4
@custom-selector
В то же время вы также можете использовать настраиваемые селекторы для определения псевдонимов, которые могут соответствовать сложным селекторам.
/* 语法 */
@custom-selector: <custom-selector> <selector-list>;
Способ определения похож на переменные CSS, но использование немного отличается.
@custom-selector :--text-inputs input[type="text"],
input[type="password"];
:--text-inputs.disabled,
:--text-inputs[disabled] {
opacity: 0.5
}
/* 相当于以下代码 */
input[type="text"].disabled,
input[type="password"].disabled,
input[type="text"][disabled],
input[type="password"][disabled] {
opacity: 0.5
}
используй это
Хотя перечисленные выше функции CSS все еще находятся на разных стадиях и в разной степени поддерживаются браузерами, использованиеpostcss-preset-env, вы можете быть первым, кто попробует новейшие функции CSS.
Конечно,postcss-preset-envКонфигурация тоже очень простая, возьмем для примера Webpack:
rules: [
{
test: /\.css$/,
use: [
'style-loader',
{ loader: 'css-loader', options: { importLoaders: 1 } },
{ loader: 'postcss-loader', options: {
ident: 'postcss',
plugins: () => [
postcssPresetEnv(/* pluginOptions */)
]
} }
]
Суммировать
Немного разобравшись, мы обнаружили, что хотя CSS и ускорил скорость обновления и итерации под стимуляцией сообщества, до сих пор ему не удается достичьCSS 预处理器 VS CSSДело в том, что при использовании препроцессора CSS вы также можете попробовать некоторые отличные новые функции в проекте CSS, а именно:CSS 预处理器 + CSS.
Но мы все еще твердо считаем, что под импультом W3C, с его непрерывным улучшением CSS CSS Preprocessor в конечном итоге будет похоже на годCoffeScript,JadeПодобно этому, он стал переходным продуктом времени. В то время всем не придется беспокоиться о настройке среды и техническом выборе различных препроцессоров CSS, просто откройте редактор и с радостью пишите стили.
Ссылаться на
- You might not need a CSS preprocessor
- CSS3 Modules and the standardization process
- How to Read W3C Specs
- Wikipedia - Cascading Style Sheets
- CSS Custom Properties for Cascading Variables Module Level 1
Добро пожаловать в блог Bump Labs:aotu.io
Или обратите внимание на официальный аккаунт AOTULabs и время от времени публикуйте статьи: