Введение
В связи с обновлением технологической станции проект станции М нашей компании начал мигрировать на React. Затем у нас с коллегой возникли большие разногласия по поводу того, как следует использовать CSS в React.
Я большой поклонник атомарного CSS. Мне нравится использовать что-то вроде:
.dn{ display:block; }
.fs24{ font-size:24px; }
.pr{ position:relative; }
/*...*/
Это способ использования стилей CSS. Коллеги, у которых точка зрения отличается от моей, могут предпочесть компонентный подход, подобный следующему:
.demo{
position:relative;
display:block;
font-size:24px;
/*...*/
}
Впервые я узнал о способе атомизации CSS от моего человека, Xinxu Zhang.CSS подвижного типа. Позже, споря с коллегами, я проверил много информации. Я обнаружил, что он, возможно, использовался в течение длительного времени и настаивал на этом, что может быть от Yahoo!«Атомный CSS». Они очень разные в том, как они используются, но их представление об атомарном CSS одинаково.
Пример
На самом деле, в этой статье я в основном хочу, чтобы все поняли разницу между компонентизацией и атомизацией на примере (я действительно старался изо всех сил, чтобы придумать его).
Предположим, у нас есть две фабрики роботов с именами «Атом» и «Компонент».
Сейчас они одновременно участвуют в торгах по проекту создания 50 роботов каждого из трех типов. Три робота выглядят так: «Простите мои плохие навыки рисования»:
Затем оба завода вернулись и дали следующий план:
С первого взгляда мы обязательно почувствуем, что вся конструкция «завода компонентов» чиста и опрятна, а тогда какой к черту бардак «атомного завода»?
Тогда давайте посмотрим, как выглядят их требования к пресс-форме:
На «Фабрике компонентов», поскольку руки у 3-х роботов одинаковые, им нужно сделать не 15 (3*5) компонентов, а только 10 компонентов.
Для «Атомной фабрики» они разделили компоненты на наименьшую единицу, поэтому необходимо всего 9 компонентов.
Тогда, если нам временно нужно добавить еще двух роботов:
Поскольку в «фабрике компонентов» 3 компонента, необходимо добавить еще 6 компонентов.
Поскольку на стороне «Атомной фабрики» нет оранжевого цвета, здесь необходимо добавить оранжевый атомный компонент.
На этих картинках я фактически игнорирую стоимость сборки компонентов в целом. Для «фабрики компонентов» каждый робот нужно склеить 4 раза от компонента до целого, а для «атомной фабрики» нужно склеить 14 раз (5*2+4) раз.
Если вы представите этого робота как модуль на нашей веб-странице, а цвет и форму в середине как наши свойства CSS, вы сможете понять, в какой ситуации находится компонентизация и атомизация в нашем мире CSS.
Статьи одноклассников на @FateRiddleReact Supplements: мои фавориты из 10 популярных решений CSS сейчас (средний)Было упомянуто, что концепция атомизации — это сокращенный способ встроенного css, и она действительно становится возможной на волне разработки компонентов.
Конечно, я говорю это не для того, чтобы доказать, что атомарное мышление лучше, чем компонентное. Потому что лично я думаю, что «атомаризация» на самом деле просто крайний способ использования «компонентизации». В методе написания React CSS это должно быть решением, которое стоит попробовать.
Также есть введение в различные аспекты, от способа мышления, до опыта проекта, до препирательств с пользователями сети и т. д.«Переосмысление CSS», всем настоятельно рекомендую посмотреть.
решение
Сказав так много, кажется, что это просто пустая теория. Вот у меня многолетний опыт, подытожил ACSS npmбиблиотека классов sacssДля всех, чтобы использовать.
Для ACSS, bootstrap, material-ui, github... все, что связанобиблиотека классов, и тогда самая полная из всей **библиотеки классов** принадлежитtailwindcss.当然他们都是基于style-systemсозданная теорией. Стоимость начала работы относительно высока и часто требует вмешательства дизайнеров.
По сравнению с этими проектами преимущества моего плана в том, чтоПростойи экстремальный CSSопыт разработки. Настолько просто, что вся логика упирается только всоглашение об именовании, использовать его можно уже через 5 минут после прочтения документа, да еще и полностью понять всю логику. Окончательный опыт разработки CSS отражается в знакомстве с этим набором правил, и вы начнете подозревать, что ваши пальцы медленнее, чем вы думаете о CSS.
Конечно, чтобы гнаться за простотой и опытом разработки, это тоже недостаток, но он не идеален и не имеет отношения к подобнымhover,focus... и другие промежуточные состояния без добавления каких-либо пользовательских точек ответа. Эта часть требует от каждого, основанного на их собственных проектах исоглашение об именованииБесплатное расширение.