Действительно ли Tailwind CSS настолько хорош? Шесть главных причин ненавидеть это
Действительно ли Tailwind CSS настолько хорош? Шесть главных причин ненавидеть это

Бесплатная пробная версия Gpt4 plus и Искусственный интеллект рисует артефакт, мы платим за него опытадрес:опыт

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

  1. Он теряет семантику HTML и CSS.
  2. Он добавляет множество классов в ваш HTML.
  3. Он не масштабируем и не подлежит повторному использованию.
  4. он генерирует CSS Файл огромный,Влияниепроизводительность
  5. Это только для людей, которые не хотят понимать и изучать CSS.
  6. Он имеет огромную библиотеку и упрощает изучение простого CSS.

1. Он теряет семантику HTML и CSS.

Одним из основных принципов веб-разработки является разделение структуры, представления и поведения вашего веб-сайта. HTML предназначен для обеспечения структуры и смысла вашего контента, CSS предназначен для обеспечения производительности и внешнего вида ваших элементов, а JavaScript предназначен для обеспечения поведения и интерактивности вашего веб-сайта.

Читатель использованных ссылок Ниже приводится перевод и доработка статьи:

😡 6 основных причин, почему вы ненавидите CSS Tailwind

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

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

  1. Он теряет семантику HTML и CSS.

Одним из основных принципов веб-разработки является разделение структуры, представления и поведения вашего веб-сайта. HTML предназначен для обеспечения структуры и смысла вашего контента, CSS предназначен для обеспечения производительности и внешнего вида ваших элементов, а JavaScript предназначен для обеспечения поведения и интерактивности вашего веб-сайта.

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

Язык кода:javascript
копировать
<div class="max-w-sm rounded overflow-hidden shadow-lg">
  <img class="w-full" src="some-image.jpg" alt="Some image">
  <div class="px-6 py-4">
    <div class="font-bold text-xl mb-2">Some title</div>
    <p class="text-gray-700 text-base">Some text</p>
  </div>
</div>

Эти имена классов ничего не говорят о значении или функции элемента. Они только говорят вам, какие они. Это затрудняет понимание и поддержку вашего кода, поскольку вам приходится помнить, что делает каждый класс и как он влияет на макет и дизайн ваших компонентов.

и Эта фаза Сравнивать,использоватьчистый С помощью CSS вы можете использовать семантические и описательные имена классов, которые отражают значение и функциональность ваших элементов:

Язык кода:javascript
копировать
<div class="card">
  <img class="card-image" src="some-image.jpg" alt="Some image">
  <div class="card-content">
    <div class="card-title">титул</div>
    <p class="card-text">определенный текст</p>
  </div>
</div>

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

2. Он наполняет ваш HTML множеством классов.

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

Язык кода:javascript
копировать
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  щелкни меня
</button>

и Эта фаза Сравнивать,существоватьчистый CSS вы можете использовать одно имя класса и определить стиль в отдельном файле:

Язык кода:javascript
копировать
<button class="btn-blue">
  щелкни меня
</button>

Чистый CSS более краток и семантичен, чем Tailwind CSS. Вы можете легко определить, что делает кнопка, посмотрев на имя ее класса, и изменить ее внешний вид, отредактировав файл CSS. При использовании Tailwind CSS вам придется запоминать множество названий классов и их значений, а также изменять HTML каждый раз, когда вы хотите настроить дизайн.

Tailwind CSS Рекомендуется поместить все стили в свой HTML , а не разделять их на разные файлы или слои. это нарушает Web Один из основных принципов развития: сосредоточиться на разделение точек. Смешивая представление и контент, вы нарушаете модульность и удобство сопровождения вашего кода. Вы также усложняете повторное использование переопределенных стилей в разных контекстах и ​​на разных устройствах.

3. Он не масштабируем и не подлежит повторному использованию.

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

Например, предположим, что у вас есть две кнопки, которые выглядят одинаково, но имеют разный цвет:

Язык кода:javascript
копировать
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
  синяя кнопка
</button>

<button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded">
  красная кнопка
</button>

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

и Эта фаза Сравнивать,существоватьчистый CSS , вы можете использовать одно имя класса для обеих кнопок и использовать модификаторы или переменные для разных вариантов:

Язык кода:javascript
копировать
<button class="btn btn-blue">
  синяя кнопка
</button>

<button class="btn btn-red">
  красная кнопка
</button>

Вы можете использовать одно имя класса для обеих кнопок и использовать модификаторы или переменные для разных вариантов. Это делает ваш код кратким и последовательным, и вы можете изменить что-то в кнопке в одном месте.

4. Создаваемые им CSS-файлы огромны и влияют на производительность.

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

Согласно официальной документации, размер CSS-файла Tailwind по умолчанию превышает 2,4 МБ, что слишком велико для рабочего веб-сайта. Даже после сжатия файла его размер остается примерно 46 КБ, что все равно больше, чем у большинства других CSS-фреймворков.

Чтобы уменьшить размер файла, Tailwind CSS Рекомендуется использовать PurgeCSS инструмент, который сканирует ваш HTML файл и удалите его из своего CSS Удалите из файла все неиспользуемые классы. Однако это добавляет дополнительный шаг в процесс сборки, если PurgeCSS Он также может привести к ошибкам, если не сможет обнаружить определенные классы, которые используются в вашем коде динамически или условно.

  1. Это только для людей, которые не хотят понимать и изучать CSS.

Tailwind CSS также оказывает негативное влияние на ваше изучение и понимание CSS. Используя Tailwind CSS, вы, по сути, полагаетесь на платформу, которая претендует на замену стилей CSS, но на самом деле для ее использования все равно требуется знание стилей CSS. Например, вам все еще нужно знать, как использовать свойства flexbox, Grid или Position для макетирования ваших элементов, но вместо того, чтобы использовать их непосредственно в файлах CSS, вы используете классы CSS Tailwind, которые имитируют их.

Ниже приводится перевод статьи:

5. Это только для людей, которые не хотят понимать и изучать CSS.

Tailwind CSS также оказывает негативное влияние на ваше изучение и понимание CSS. Используя Tailwind CSS, вы, по сути, полагаетесь на платформу, которая претендует на замену стилей CSS, но на самом деле для ее использования все равно требуется знание стилей CSS. Например, вам все еще нужно знать, как использовать свойства flexbox, Grid или Position для макетирования ваших элементов, но вместо того, чтобы использовать их непосредственно в файлах CSS, вы используете классы CSS Tailwind, которые имитируют их.

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

6. Он имеет огромную библиотеку, что упрощает изучение простого CSS.

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

Кроме того, «Попутный ветер» CSS не следует использовать стандартные соглашения об именах и синтаксис CSS. Например,Он не использует тире или верблюжий регистр для разделения слов в именах классов.,Вместо этого используйте двоеточия и скобки. Он не использует процентное соотношение пикселей для указания значений.,Вместо этого используйте любую цифру или букву. Это может сделать ваш код непоследовательным и незнакомым.

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

boy illustration
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
boy illustration
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
boy illustration
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
boy illustration
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
boy illustration
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
boy illustration
Идеальная интеграция Cursor и DeepSeek API
boy illustration
DeepSeek V3 снижает затраты на обучение больших моделей
boy illustration
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
boy illustration
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
boy illustration
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
boy illustration
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
boy illustration
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
boy illustration
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
boy illustration
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
boy illustration
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
boy illustration
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
boy illustration
Cloud Native|Практика: установка Dashbaord для K8s, графика неплохая
boy illustration
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
boy illustration
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
boy illustration
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
boy illustration
Центр конфигурации————Накос
boy illustration
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
boy illustration
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
boy illustration
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
boy illustration
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
boy illustration
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
boy illustration
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
boy illustration
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
boy illustration
[Зона легкого облачного игрового сервера] Управление игровыми архивами
boy illustration
Развертывание SpringCloud-проекта на базе Docker и Docker-Compose