Вы понимаете эти концепции CSS?

внешний интерфейс CSS

Frontier: Если говорить о CSS, то самое впечатляющее то, что когда я впервые начал заниматься фронтенд-разработкой после окончания университета, как профессионалcut picture boy(Cut Tuzi), css широко используется в макетах страниц и диаграммах дизайна восстановления для разработки страниц. Я помню, что Bootstrap (для разработки адаптивных макетов и веб-сайтов, ориентированных на мобильные устройства) был тем, с чем я больше всего контактировал в начале. Однако с быстрым развитием интерфейса появились отличные библиотеки пользовательского интерфейса, такие как дизайн элементов и муравьев, и я чувствую эстетическую усталость при сравнении. Ближе к дому CSS породил немало новых решений за последние годы, таких какCSS Modules,styled-components（css in js ）,Functional CSS,CSS 原子类,CSS沙盒так далее

1. CSS Module

Модуль CSS, как следует из названия, представляет собой модуляризацию CSS.Зачем нам модульность? Мы знаем, что при разработке веб-приложений SPA, основанных на vue и react, они, по сути, строятся из нескольких компонентов, точно так же, как строительство дома из строительных блоков.Если имена классов стиля двух компонентов повторяются в это время, не будет Это конфликт? уже? Чтобы разрешать конфликты, необходимо различать модуляризацию.Не называя конфликтов, лучше изолировать компоненты.CSS-модуль — один из методов реализации модуляризации CSS.

Когда модуль CSS упакован, имя класса будет преобразовано в новое имя класса с хеш-значением, и в соответствии с правилами именования проблема конфликта имен классов CSS будет устранена.

👨‍🎓 Чувак: Является ли модуль CSS способом реализации стиля Vue: с областью видимости?

Ответ: Нет, CSS Scope достигается за счет ограничения области действия, и стиль действует локально, а не настоящий css-модуль.

Мы знаем, что когда тег стиля имеет атрибут scoped, его стиль css может использоваться только для текущего компонента Vue.Его принцип реализации достигается с помощью PostCSS, путем добавления атрибута в соответствующий dom и выбора css Устройство добавляет соответствующий атрибут, соответствующий этому уникальному домену, как показано ниже.

А как реализован css модуль?На примере vue как им пользоватьсяCSS module

Здесь мы посмотрим на модуль CSS, компилируемый в эффекте Vue Project

Мы видим, что модули CSS автоматически переименуют класс, когда страница будет окончательно построена.Официальное описание vue:这个 module 特性指引 Vue Loader 作为名为 $style 的计算属性，向组件注入 CSS Modules 局部对象。然后你就可以在模板中通过一个动态类绑定来使用它了

👨‍🎓 Ах Ле: Вы сказали, что CSS Module — это реализация модуляризации CSS, есть ли другие реализации модульности CSS?

Да, например, соглашение об именах БЭМ, и в следующем разделе будет представленоCSS in JS

Вот краткое введение в БЭМ

🌲 Дополнительное чтение:

2. CSS in JS

CSS в JS, как следует из названия, заключается в записи применяемого стиля CSS в файле JavaScript и использовании языка JS для написания CSS, включая замену исходного суффикса на.css、.less、.scssи т.д. документы

2.1 styled-components

styled-components — это хорошо известная схема реализации CSS в JS, в основном используемая в React.Используя синтаксис строки шаблона тега синтаксиса es6 для определения свойств CSS для компонентов, нам не нужно устанавливатьclassNameИмя класса~ Давайте посмотрим на демо ниже 👇

👩‍🎓 А Сюэ: styled-components создан для React, можно ли использовать Vue?

Ответ: Да,styled-componentsкоманда разработала специально для Vuevue-styled-componentsИ стилизованные компоненты React очень похожи. Заинтересован играть, я не проскользнул (но этот склад также немного меньше, это кажется очень маленьким, стиль-компонент действительно немного неловкий), но я всегда думаю, что CSS-In- Js станет все более популярнымСсылка на документацию 🔗

🌲 Расширение:

официальный сайт styled-components

3. Атомарные классы CSS

На самом деле, эта концепция очень старая, и по сути это идея написания CSS.Короче говоря, это создание селекторов с использованием атомарных классов.Например, мы определяем файл base.css, который определяет селекторы с высоким публичным повторным использованием. , например mgt20（来表示 margin-top: 20px ）Подождите, преимущество в том, что легко извлечь повторно используемый код и повысить степень повторного использования кода, но чрезмерная абстракция также приведет к огромным затратам на обслуживание.

3.1 tailwind

tailwind Ссылка на официальный сайт 🔗На самом деле, это атомарное мышление класса, класс представляет свойство CSS. Преимущество в том, что он разбивает класс на достаточно мелкие, очень мелкие детали, которые очень «атомарны». Он очень популярен в зарубежных странах, из-за сильных пользовательских атрибутов и сильной семантики имени класса вам больше не нужно беспокоиться об имени класса (ведь нам может понадобиться n классов для разработки одного компонента), и настройка подобна строительным блокам., но внутренние разногласия относительно велики, ранние атомные виды в основном распылялись в Китае, но отношение изменилось после 2020 года. Давайте посмотрим на демо ниже, как официальный пример реализует карту

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

Приложение для посадки на колеса, текущая версия твиттера основана на попутном ветре, мы можем ясно видеть это на консоли

Кстати, эта лаборатория довольно богата и спонсировала рекламное место вите.

🌲 Дополнительное чтение:

3.2 bulma

Bulma — это бесплатная современная CSS-инфраструктура с открытым исходным кодом, основанная на технологии макета Flexbox.Когда я впервые столкнулся с ней, я увидел в сообществе облегченные компоненты пользовательского интерфейса, основанные на Bulma Vue.js.buefy. Он полностью основан на CSS и не требует JavaScript. Это также самая большая разница между ним и бустрапом. Однако сейчас он не очень популярен, я не буду здесь подробно останавливаться, заинтересованные студенты могут узнать об этом подробнее, вы можете увидеть следующий пример.

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

🌲 Дополнительное чтение:

4.css Sandbox (песочница)

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

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

  • Scoped CSS: определяя атрибут scoped, вы можете ограничить область действия CSS в сочетании с деревом DOM.
  • CSS в js и модуль CSS — это инструменты, которые компилируют стили в скрипты.
  • Удалить теги в голове: это также принцип песочницы css qiankun (микро-интерфейсный фреймворк), путем записи новых тегов стиля/ссылки во время работы подпроекта и удаления этих тегов, когда подпроект удален. Повторно добавьте тег вновь загруженного подпроекта для достижения
  • shadow DOM: Вы можете понимать это как dom in dom, что является важным атрибутом веб-компонентов. Он позволяет присоединять скрытые деревья DOM к обычным деревьям DOM. Недостатком является плохая совместимость. Вы можете видетьСовместимость 🔗

🌲 Дополнительное чтение:

🌲Предыдущие статьи Соуса:

Пожалуйста, напиток 🍵 Не забудьте подключиться три раза ~

1. После прочтения не забудьте поставить лайк 🌲 соусу, там есть 👍 и мотивация

2. Обратите внимание на интересные вещи в интерфейсе официального аккаунта и пообщайтесь с вами об интересных вещах в интерфейсе.

3. Статья попала в Github frontendThings благодаря Star✨

Категории