Модульное прошлое и настоящее «Front-end Engineering Four Steps» (Часть 2)

внешний интерфейс JavaScript CSS
Модульное прошлое и настоящее «Front-end Engineering Four Steps» (Часть 2)

Отказ от ответственности: эта статья является первой подписанной статьей Nuggets, и ее перепечатка без разрешения запрещена.

написать впереди

надМодульное прошлое и настоящее «Front-end Engineering Four Steps» (Часть 1)В основном мы вводим знания, связанные с модуляризацией JS.Я думаю, что многие люди знакомы с модульностью JS, но когда дело доходит до модульности CSS, это может быть не всем так понятно. Большинство людей сосредотачиваются на JS и игнорируют CSS, но CSS также является неотъемлемой частью трех мушкетеров фронтенда.При написании CSS большинство людей более случайны, поэтому это часто вызывает некоторые проблемы при разработке. В следующей статье мы кратко поговорим о модульности CSS.

Почему CSS также должен быть модульным?

На самом деле, когда мы используем такие фреймворки, как Vue и React, мы уже использовали модульность CSS. Оглядываясь назад на историю, от нашего почерка нативного CSS до использования препроцессоров, таких как Sass/Less, до использования постпроцессоров, таких как PostCSS, или использования модуля CSS и CSS в JS, все они вызвано тестированием определенных проблем Сравните целевые программы.

Источник проблем, на которые направлена ​​модульность CSS, на самом деле очень прост:

  • Повторяющиеся имена классов
  • Иерархия классов
  • Повторное использование кода CSS
  • CSS файл разделен

Вот почему существует модульность CSS.

Какие есть варианты модульности CSS?

BEM

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

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

Мы можем кратко взглянуть на это соглашение об именах:

.block{} /* 代表了更高级别的抽象或组件 */
.block__element{} /*  代表.block的后代，用于形成一个完整的.block的整体 */
.block--modifier{} /* 代表.block的不同状态或不同版本 */

Приведенное выше описание несколько официально, на самом деле.blockпредставляет блок в представлении, и.block__elementпредставляет собой.blockэлементы под блоком, последний.block--modifierпредставляет собой.blockМодификатор для блока. Конечно, это можно записать и так:

.site-search{} /* 块 */
.site-search__field{} /* 元素 */
.site-search--full{} /* 修饰符 */

Единственное отличие - еще одно-обозначение, это позволяет вашим собственным блокам просмотра быть разделенным одним дефисом,__представляет элемент,--обозначает модификатор.

Например:

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

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

Имена БЭМ записываются следующим образом:

<form class="site-search  site-search--full">
  <input type="text" class="site-search__field">
  <input type="Submit" value ="Search" class="site-search__button">
</form>

Как и выше, обычный метод написания CSS выглядит на первый взгляд простым и красивым, но когда объем кода большой, он будет очень беспорядочным, и я не знаю, какому классу соответствует. А БЭМ другой.Хоть он и выглядит некрасиво, мы ясно видим, что есть.site-searchблок, который находится внутри.site-search__fieldа такжеsite-search__buttonдва элемента. а также.site-searchСуществует еще одна форма, называемая.site-search--full.

преимущество:

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

недостаток:

Имена классов CSS будут длинными и сложными. Имена классов CSS, сгенерированные в соответствии с правилами именования BEM, будут очень сложными, что уродливы в грубых условиях. Однако, как только вы знакомы с Конвенцией именования, вы можете легко понять его значение. По сравнению с практичностью БЭМ, уродство не стоит упоминать вообще! !

OOCSS

Object Oriented CSS, объектно-ориентированный CSS, предназначенный для написания многократно используемого, мало связанного и масштабируемого кода CSS.

OOCSSОн основан на объектно-ориентированном мышлении для определения стилей, разделения абстракции и реализации и извлечения общедоступного кода.

OOCSSДумайте, что контейнер (контейнер) и контент (контент) нужно изолировать. При этом старайтесь не использовать определения стилей, которые зависят от положения структуры узла. Например, нельзя:

.container-list .title{ /* ... */ }

OOCSSпредложение:

.title{ /* ... */ }

Например, все поймут, если у нас есть контейнер следующим образом:

<div class="container"></div>

<style>
  .container{
    width: 50%;
    background: yellow;
    border: 1px solid #ccc;
    margin: 10px 15px 20px 25px;
  }
</style>

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

<div class="sizelof2 solidGray bgYellow mt10 ml25 mr15 mb20"></div>

<style>
.sizelof2{width: 50%};
.solidGray{border: 1px solid #ccc};
.bgYellow {background: yellow};
.mt10 {margin-top: 10px};
.mr15 {margin-right: 15px};
.mb20 {margin-bottom: 20px};
.ml25 {margin-left: 25px};
</style>

Как указано выше, это легко понять?

преимущество:

Говоря о преимуществах OOCSS, из-за повторного использования стилей объем CSS-кода естественным образом уменьшается, что может снизить нашу нагрузку. Объем кода небольшой, скорость загрузки, естественно, высокая, а код лаконичный и простой в обслуживании. Может легко создавать новые макеты страниц или создавать новые стили страниц.

недостаток:

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

AMCSS

АМССС этоAttribute Modules for CSS. AM — это метод, который использует классы атрибутов HTML и их значения вместо элементов стиля. Это эффективно объявляет отдельное пространство имен для каждого свойства для инкапсуляции информации о стиле, делая HTML и CSS более читабельными и удобными в сопровождении.

Проще говоря, это модульность CSS с помощью селекторов свойств CSS.

Например, следующий код:

<div class="button button-large button-blue">Button</div>

<style>
	.button {/* ... */}
  .button-large {/* ... */}
  .button-blue {/* ... */}
</style>

Преобразованный в AMCSS, поскольку он основан на контроле атрибутов, он становится следующим:

<div button="large blue">Button</div>

<style>
[button] {/* ... */}
[button~="large"] {/* ... */}
[button~="blue"] {/* ... */}
</style>

Чтобы избежать конфликта атрибутов, мы обычно добавляем к нему универсальный префикс, напримерam-, так что это заканчивается так:

<div am-button="large blue">Button</div>

<style>
[am-button] {/* ... */}
[am-button~="large"] {/* ... */}
[am-button~="blue"] {/* ... */}
</style>

Не удивляйтесь, это всего лишь гибкое использование селекторов CSS. Если вы не понимаете, вы можете использовать селекторы свойств CSS Google.

преимущество:

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

недостаток:

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

ACSS

ACSS, полное названиеAtomic CSS, то есть атомарный CSS.

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

следующим образом:

<div class="w-100 h-150 m-10 bgc-greed f-l"></div>

<style>
.w-100 { width: 100px; }
.h-150 { height: 150px; }
.m-10 { margin: 10px; }
.bgc-greed { background-color: green; }
.f-l { float: left; }
</style>

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

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

Отзывчивый:

<img class="w-16 md:w-32 lg:w-48" src="...">

в коде вышеmdкоторый представляет@media (min-width: 768px) { ... },lgявляется@media (min-width: 1024px) { ... }.

Цвет темы:

<div class="bg-white dark:bg-gray-800">
  <h1 class="text-gray-900 dark:text-white">Dark mode is here!</h1>
  <p class="text-gray-600 dark:text-gray-300">
    Lorem ipsum...
  </p>
</div>

Как и выше, тема по умолчанию иdarkТемы сходятся.

Интерактивное состояние:

<form>
  <input class="focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent ...">
  <button class="hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-purple-600 ...">
    Sign up
  </button>
</form>

Основной стиль:

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

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  h1 {
    @apply text-2xl;
  }
  h2 {
    @apply text-xl;
  }
}

Функциональный класс:

Функциональный класс эквивалентен коллекции классов с несколькими стилями классов и при его использовании должен проектироваться по мере необходимости.

.btn {
	@apply py-2 px-4 font-semibold rounded-lg shadow-md;
}
.btn-green {
	@apply text-white bg-green-500 hover:bg-green-700;
}

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

преимущество:

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

недостаток:

Написание классов CSS после использования атомизированной структуры CSS Tailwind немного похоже на написание встроенных стилей. Несмотря на то, что код CSS минимизирован, HTML раздут, и хотя именование не вызывает беспокойства, необходимо помнить множество новых правил. Так что на рынке есть и похвала, и критика! В частности, каждый может сделать свое собственное суждение после собственного опыта, лично он все еще очень оптимистичен.

CSS Modules

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

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

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

Вышеприведенное изображение представляет собой скомпилированный код работающего Vue-cli, мы можем ясно видеть, что скомпилированный тег html содержитdata-vПользовательский атрибут в начале, и когда CSS добавляет к нему стили, используется метод имени класса + селектор атрибута, чтобы избежать конфликтов имен и добиться модульности.

И реализация модулей CSS в Vue использует AMCSS, о котором мы упоминали выше.

Поскольку даже Vue использует этот метод, он должен иметь некоторые уникальные преимущества.Давайте поговорим о преимуществах CSS-модулей?

преимущество:

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

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

Наконец, модули CSS также поддерживают введение стилей внешних модулей, которыми можно делиться.

недостаток:

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

CSS in JS

CSS в JS, как видно из названия, пишут CSS в JS-файлах. Это идея, а не реализация конкретной библиотеки, так что вы можете использовать некоторые функции языка, такие как объявления модулей, определения переменных, вызовы функций и условные суждения, которые принадлежат JS в CSS, чтобы обеспечить гибкие и расширяемые стили. Эта идея также популяризируется широким использованием React.

Существует множество библиотек, реализующих CSS в JS, наиболее распространенными из них являются следующие:

  • Styled-components
  • Radium
  • glamorous
  • JSS

В дополнение к различиям в сгенерированных стилях CSS и синтаксисе написания, различные реализации CSS в JS имеют некоторые уникальные функции в дополнение к самым основным функциям, таким как локальная область видимости CSS, например следующие:

  • глобальный селектор
  • Стили на основе состояния
  • Рендеринг на стороне клиента и на стороне сервера
  • тайник
  • Встроенный автоматический префикс
  • запросы средств массовой информации
  • вложенность селектора
  • Встроенная поддержка анимации
  • Другие плагины и пакеты
  • так далее

Это не один здесь, вы можете понять это.

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

преимущество:

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

недостаток:

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

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

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

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

напиши в конце

По сути, БЭМ, OOCSS, AMCSS и ACSS для нас — это просто ограничения, которые мы использовали в первые дни для удобства разработки, а CSS-модули и CSS в JS — серьезные модульные решения. CSS в JS — это полный отказ от CSS и использование JS для написания стилей.Этот метод более радикален, он не может использовать существующие технологии CSS, и относительно сложно бороться с такими проблемами, как псевдоклассы. CSS-модули по-прежнему используют CSS, но позволяют JS управлять зависимостями, что может максимизировать сочетание экологии CSS и возможности модульности JS, что, на мой взгляд, является лучшим решением.

Из-за быстрой разработки модулей CSS и CSS в JS с экосистемами Vue и React многие люди работают в небольших командах, и приятно разрабатывать с некоторыми инструментами и некоторыми библиотеками, такими как Scss/Less или Styled-components, и это решаемо.Большинство проблем с разработкой уже позади,поэтому мне плевать на ограничения БЭМ,ООССС,АМССС,АКСС.Следствием со временем является то,что CSS команды пишется в каше,да и нейминг тоже странный. Даже если вы не можете написать слишком много CSS в компоненте, в долгосрочной перспективе он накопит много проблем со стилем. Итак, я хочу сказать, что если проблемы с CSS вашей команды такие же, как указано выше, то действуйте быстро и используйте некоторые ограничения, такие как BEM, ACSS и т. д., чтобы стандартизировать CSS поверх современной схемы модульности CSS, которая проста и легка. , Плюсы перевешивают минусы.

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

Ссылаться на

BEM

AMCSS

БЭМ — методика CSS-нейминга от Яндекса

Говоря о модуляризации CSS

Категории