Бесплатная пробная версия Gpt4 plus и Искусственный интеллект рисует артефакт, мы платим за него опытадрес:опыт
Tailwind CSS — это популярная CSS-платформа, ориентированная на утилиты, которая утверждает, что помогает вам быстрее и проще создавать собственные проекты. Однако не всем нравится Tailwind CSS. На самом деле, есть много причин, по которым вам следует избегать его использования и придерживаться чистого CSS или других фреймворков. Вот основные причины, по которым вам следует ненавидеть Tailwind CSS:
Одним из основных принципов веб-разработки является разделение структуры, представления и поведения вашего веб-сайта. HTML предназначен для обеспечения структуры и смысла вашего контента, CSS предназначен для обеспечения производительности и внешнего вида ваших элементов, а JavaScript предназначен для обеспечения поведения и интерактивности вашего веб-сайта.
Читатель использованных ссылок Ниже приводится перевод и доработка статьи:
😡 6 основных причин, почему вы ненавидите CSS Tailwind
Tailwind CSS — это популярная CSS-платформа, ориентированная на утилиты, которая утверждает, что помогает вам быстрее и проще создавать собственные проекты. Однако не всем нравится Tailwind CSS. На самом деле, есть много причин, по которым вам следует избегать его использования и придерживаться чистого CSS или других фреймворков. Вот основные причины, по которым вам следует ненавидеть Tailwind CSS:
Он теряет семантику HTML и CSS. Он добавляет множество классов в ваш HTML. Он не масштабируем и не подлежит повторному использованию. Создаваемые им CSS-файлы огромны и влияют на производительность. Это только для людей, которые не хотят понимать и изучать CSS. Он имеет огромную библиотеку и упрощает изучение простого CSS.
Одним из основных принципов веб-разработки является разделение структуры, представления и поведения вашего веб-сайта. HTML предназначен для обеспечения структуры и смысла вашего контента, CSS предназначен для обеспечения производительности и внешнего вида ваших элементов, а JavaScript предназначен для обеспечения поведения и интерактивности вашего веб-сайта.
Однако попутный ветер CSS Этот принцип нарушается при смешивании производительности и структуры. Вместо использования осмысленных и описательных имен классов, отражающих назначение и функциональность вашего элемента, Tailwind CSS Используются общие и неясные имена классов, описывающие их внешний вид. Например, следующее Tailwind CSS Как выглядит простой компонент карты:
<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 вы можете использовать семантические и описательные имена классов, которые отражают значение и функциональность ваших элементов:
<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.
Одно из основных критических замечаний к Tailwind CSS заключается в том, что он заставляет вас писать HTML, наполненный десятками служебных классов, что затрудняет его чтение и поддержку. Например, вот как выглядит простая кнопка в CSS Tailwind:
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
щелкни меня
</button>
и Эта фаза Сравнивать,существоватьчистый CSS вы можете использовать одно имя класса и определить стиль в отдельном файле:
<button class="btn-blue">
щелкни меня
</button>
Чистый CSS более краток и семантичен, чем Tailwind CSS. Вы можете легко определить, что делает кнопка, посмотрев на имя ее класса, и изменить ее внешний вид, отредактировав файл CSS. При использовании Tailwind CSS вам придется запоминать множество названий классов и их значений, а также изменять HTML каждый раз, когда вы хотите настроить дизайн.
Tailwind CSS Рекомендуется поместить все стили в свой HTML , а не разделять их на разные файлы или слои. это нарушает Web Один из основных принципов развития: сосредоточиться на разделение точек. Смешивая представление и контент, вы нарушаете модульность и удобство сопровождения вашего кода. Вы также усложняете повторное использование переопределенных стилей в разных контекстах и на разных устройствах.
Другая проблема Tailwind CSS заключается в том, что его нельзя масштабировать и использовать повторно. Tailwind CSS предлагает вам индивидуально стилизовать каждый элемент, применяя к нему несколько служебных классов. Однако это приводит к дублированию и несогласованности вашего кода, так как вам приходится повторять один и тот же класс для похожих элементов или слегка изменять его для разных вариаций.
Например, предположим, что у вас есть две кнопки, которые выглядят одинаково, но имеют разный цвет:
<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 , вы можете использовать одно имя класса для обеих кнопок и использовать модификаторы или переменные для разных вариантов:
<button class="btn btn-blue">
синяя кнопка
</button>
<button class="btn btn-red">
красная кнопка
</button>
Вы можете использовать одно имя класса для обеих кнопок и использовать модификаторы или переменные для разных вариантов. Это делает ваш код кратким и последовательным, и вы можете изменить что-то в кнопке в одном месте.
Еще одним недостатком Tailwind CSS является то, что генерируемые им CSS-файлы имеют большой размер, что может негативно повлиять на производительность вашего сайта. Tailwind CSS включает в себя тысячи служебных классов, охватывающих практически все возможные варианты стилей. Однако большинство этих классов никогда не используются в вашем проекте и просто добавляют ненужное раздутие вашим CSS-файлам.
Согласно официальной документации, размер CSS-файла Tailwind по умолчанию превышает 2,4 МБ, что слишком велико для рабочего веб-сайта. Даже после сжатия файла его размер остается примерно 46 КБ, что все равно больше, чем у большинства других CSS-фреймворков.
Чтобы уменьшить размер файла, Tailwind CSS Рекомендуется использовать PurgeCSS
инструмент, который сканирует ваш HTML файл и удалите его из своего CSS Удалите из файла все неиспользуемые классы. Однако это добавляет дополнительный шаг в процесс сборки, если PurgeCSS
Он также может привести к ошибкам, если не сможет обнаружить определенные классы, которые используются в вашем коде динамически или условно.
Tailwind CSS также оказывает негативное влияние на ваше изучение и понимание CSS. Используя Tailwind CSS, вы, по сути, полагаетесь на платформу, которая претендует на замену стилей CSS, но на самом деле для ее использования все равно требуется знание стилей CSS. Например, вам все еще нужно знать, как использовать свойства flexbox, Grid или Position для макетирования ваших элементов, но вместо того, чтобы использовать их непосредственно в файлах CSS, вы используете классы CSS Tailwind, которые имитируют их.
Ниже приводится перевод статьи:
Tailwind CSS также оказывает негативное влияние на ваше изучение и понимание CSS. Используя Tailwind CSS, вы, по сути, полагаетесь на платформу, которая претендует на замену стилей CSS, но на самом деле для ее использования все равно требуется знание стилей CSS. Например, вам все еще нужно знать, как использовать свойства flexbox, Grid или Position для макетирования ваших элементов, но вместо того, чтобы использовать их непосредственно в файлах CSS, вы используете классы CSS Tailwind, которые имитируют их.
Это не только сбивает с толку, но и вводит в заблуждение. Вы не узнали настоящего CSS свойства и ценности, но обучение Tailwind CSS Классы и их значение. Это может заставить вас думать, что вы знаете CSS, но на самом деле вы знакомы только с Tailwind CSS. если вы столкнетесь Tailwind CSS В случае, если нужный вам класс не предоставлен или вы захотите перейти на другой инструмент, вам будет сложно разобраться и написать актуальный CSS код.
Tailwind CSS Для каждого возможного сценария предусмотрены тысячи служебных классов, но это также означает, что вам нужно не забыть найти их все и понять, что они означают. Это может быть ошеломляющим, особенно для Web Для новичков в разработке.
Кроме того, «Попутный ветер» CSS не следует использовать стандартные соглашения об именах и синтаксис CSS. Например,Он не использует тире или верблюжий регистр для разделения слов в именах классов.,Вместо этого используйте двоеточия и скобки. Он не использует процентное соотношение пикселей для указания значений.,Вместо этого используйте любую цифру или букву. Это может сделать ваш код непоследовательным и незнакомым.
Напротив, обучение обычному CSS Гораздо проще и интуитивно понятнее. Вам просто нужно изучить основные атрибуты и значения, которые стандартизированы и широко поддерживаются браузерами. Вы также можете использовать пользовательские свойства и переменные, чтобы создать собственное соглашение об именах и значения, соответствующие вашим потребностям. Вы также можете использовать онлайн-ресурсы и инструменты для интерактивного и интуитивного обучения и практики. CSS。