TailwindCSS — это скомпилированная библиотека CSS для атомарных классов.Что касается плюсов и минусов атомарных классов, эта статья автора TailwindCSS очень ясна:
CSS Utility Classes and "Separation of Concerns
На самом деле, если у вас есть практический инженерный опыт, вы полностью согласитесь со взглядами, изложенными в этой статье.
Используя Tailwind CSS, мы можем очень быстро написать пользовательский интерфейс и очень просто написать псевдоклассы и медиа-запросы.Количество кода составляет от 1/5 до 1/10 от объема написанного вручную CSS, который можно назвать очень эффективным.
В целом, TailWind CSS очень хорош, я рекомендую его в новых проектах, но есть и следующие проблемы, основные проблемы сосредоточены в компиляции и исключении:
Обратите внимание, что хотя следующие проблемы существуют, они не могут скрыть преимущества, которые дает Tailwind.
- Общая проблема с атомарными классами заключается в том, что невозможно определить границу числа атомарных классов.Если дизайн не определен, комбинация атомарных классов, которые могут использоваться с медиа-запросами и псевдоклассами, будет иметь объем CSS около 6 МБ. Tailwind рекомендует использовать такие инструменты, как PurgeCSS. Регулярно сопоставляйте код перед публикацией, удаляйте неиспользуемые атомарные классы и, наконец, уменьшайте размер css размером 6 МБ до 20–50 КБ;
- Недостаток 2, невозможно обеспечить 100% согласованность рабочей среды и среды разработки. Так как Purge имеет много накладных расходов на удаление css, сейчас все привыкли к предпросмотру при разработке, поэтому общая практика - использовать в процессе разработки полный css, компилировать и удалять css при публикации, если переменная используется в проекте для измените css, он не будет соответствовать . , что приведет к несогласованности рабочей среды и среды разработки, и его нельзя будет найти без проверки;
- Недостаток 3. Неудобно использовать значения, отличные от кастомизации.Например, дизайнер требует, чтобы кнопка была смещена на 3 пикселя вправо.В это время еще необходимо отступить от атомарного класса, предустановленного Tailwind и написать css отдельно. Это противоречит официальному слогану Tailwind CSS: разрабатывайте современные веб-приложения, не выходя из HTML;
- Недостаток 4, в HTML-коде есть куски атомарных классов, решение — использовать @apply для создания пользовательской комбинации атомарных классов, а затем перекомпилировать. Частая перекомпиляция во время разработки снизит эффективность.Цель атомарных классов — повысить эффективность разработки. Еще одно официальное решение — максимально использовать компоненты современных фреймворков, таких как React и Vue, но это может легко привести к большому количеству компонентов только с 1 стилем и 1 меткой. Это менее эффективно, чем прямое определение css;
- Недостаток 5, нельзя использовать селекторные функции css, такие как дочерние селекторы, селекторы потомков, селекторы братьев и сестер, отсутствие таких функций означает, что для каждого элемента нужно написать класс;
- Недостатки 6, Failwindcss на самом деле также имеют проблемы загрязнения CSS, что приводит к развитию CSS CSS, не подходит для разработки библиотек общего группы, и более подходит для развития бизнеса; например, если M-2 составляет 1rem, бизнес Код также используется в сервисном коде. CSS и дизайн - 1.5REM, то M-2 встречается с загрязнением CSS.
- Недостаток 7: необходимо запоминать сотни ключевых слов; в Tailwind CSS много новых слов, которые отделены от исходного словаря таблицы стилей CSS. Каждый словарь имеет разные уровни значений, которые могут быть объединены в сотни тысяч новое ключевое слово. Официальное решение — предоставить такие плагины, как VSCode и WebStorm.
- Недостаток 8, Tailwind постоянно обновляется, и имена атомарных классов будут корректироваться, так что вам всегда нужно обновлять свой список слов, например, изменения в 2.0:
Упомянутые выше недостатки, хотя я и чувствую себя бесстыдным в душе (потому что собственное решение я начну продавать позже), но они есть, именно поэтому мне нужно написать Flavor CSS:
доступ:Вкус атомарного класса среды выполнения css
Flavor CSS — это 8 вышеперечисленных типов проблем, с которыми я столкнулся при использовании Tailwind CSS, но мне очень нравится процесс разработки Tailwind CSS, поэтому я разработалВремя выполненияБиблиотека атомарных классов, вы можете узнать больше об этой библиотеке и посмотреть, как решить вышеуказанные проблемы.