TailwindCSS – очередной фреймворк или новый шаг эволюции?
Очевидно, я бы не стал писать эту статью, если бы считал, что TailwindCSS – просто очередной фреймворк. Я считаю, что он кардинально отличается от всех других фреймворков и создает отдельную парадигму web-стилизации. И при этом выполняет все поставленные перед ним задачи, делая это лучше и удобнее других.
Тех, кто еще не знаком с TailwindCSS, я постараюсь завербовать в ряды его поклонников. Тех, кто против него, я постараюсь заставить в этом усомниться и пересмотреть своё мнение.
Я также хотел узнать ваше мнение по этому поводу. TailwindCSS – это шаг вперед, назад или просто топтание на месте? Свой ответ вы можете оставить в опросе в конце статьи. А если вам есть, что добавить по теме, пожалуйста, сделайте это в комментариях.
Кто не в курсе, TailwindCSS – это CSS-библиотека, которая упрощает стилизацию HTML, тем же путем, как это делает Bootstrap, – добавляя огромное количество разнообразных классов. Но, в отличие от Bootstrap, который добавляет уже готовые к употреблению компоненты, такие как кнопки, алерты и навбары, классы TailwindCSS нацелены на конкретное свойство. В TailwindCSS нет заранее написанной кнопки, её ты должен сделать сам.
По факту, вы пишете свой CSS как HTML-классы в формате похожем на популярный плагин Emmet. Ерунда? Как бы не так. Всё дело как всегда в деталях и окружении.
Я прекрасно понимаю людей, которые морщатся при виде такого формата записи. И я понимаю почему. Но мне кажется, что это просто плохая привычка из «программистского детства».
Мы попробуем избавиться от неё и понять все плюсы работы с TailwindCSS. Для этого сначала перечислим все минусы, которые якобы свойственны таким CSS-фреймворкам. А затем разберемся, есть ли они в TailwindCSS.
Проблемы
- Как бы много ни было классов, мы всё равно ограничены данным нам набором. Мы загоняем своё оформление в придуманные за нас рамки, что приводит к тому, что все сайты, написанные на TailwindCSS похожи друг на друга.
- У нас будет куча лишних стилей, которые мы не используем.
- Если нам нужно сделать две одинаковых кнопки, нам придется еще раз писать те же самые классы в другом месте.
- Засорять HTML стилями – это строго против правил. Всех верстальщиков «с пелёнок» учат не писать стили inline, а TailwindCSS нарушает эту аксиому.
Если я что-то пропустил, жду ваши предложения в комментариях. Обязательно добавим и обсудим.
Проблемы описаны в порядке сложности их решения. Мы пойдем по порядку, начнем с самых простых проблем и закончим самыми фундаментальными. Итак.
1. TailwindCSS – это не Bootstrap
Вроде бы небольшое отличие TailwindCSS от всех других CSS-фреймворков, во главе которых Bootstrap, а именно классы как свойства, а не классы как компоненты, меняет примерно всё. И если внешне TailwindCSS на них похож, по своей сути, он нечто совсем другое – новый подход к написанию CSS.
Если вы считаете, что TailwindCSS лишает сайты оригинальности, значит вы эту разницу пока не видите. Во-первых, претензия к одинаковости касается именно Bootstrap и подобных фреймворков с классами как компонентами. Во-вторых, даже там при желании всё можно кастомизировать до неузнаваемости, переписав классы под свои нужды и разбавив с классами из чистого CSS.
В чем основная сила Bootstrap – он хорошо подходит для proof of concept. Быстро нарисовать более-менее красивый интерфейс, когда нужно показать функционал, – это Bootstrap. Нам не столь важен внешний вид, главное, чтобы быстро и глаза не резало (например, в админпанели), – это тоже Bootstrap.
TailwindCSS в таких случаях не подходит по определению. У вас нет готовых компонентов, вам всё нужно писать с нуля (TailwindUI не в счет).
Конечно, TailwindCSS изначально тоже вас ограничивает. Например, есть margin со значением 2.5rem , есть 3rem , но нет 2.75rem . Ограничение. Однако оно легко решается настройками в файле tailwind.config.js , где вы можете добавить любые значения, нужные вам в проекте.
Вы можете добавлять, удалять и переписывать любые классы. Если вдруг вас не устраивает цвет bg-red-500 , вы можете его изменить одной строчкой кода. В других фреймворках вам бы пришлось менять компоненты. Подробнее о кастомизации читайте в документации.
2. Никаких лишних стилей
Проблема с переизбытком лишних классов также решается с помощью tailwind.config.js . Если раньше вам нужно было добавлять PurgeCSS или другую библиотеку для удаления лишних классов, теперь TailwindCSS сделает это за вас. Всё, что вам нужно сделать, – указать папку, где хранятся ваши файлы с разметкой. TailwindCSS сам пройдется по ним, найдет все использованные классы, их оставит, а остальные удалит.
Если какие-то классы добавляются через JavaScript, укажите их в whitelist, TailwindCSS также их сохранит. Подробнее в документации.
3. Переиспользуемость
Если писать CSS в inline-стиле, для одинаковых или почти одинаковых кнопок каждый раз придется писать почти один и тот же код. Как эту проблему можно решить в TailwindCSS? It depends.
Если вы пишете код без фронтенд-фреймворка, ваш выбор очевиден – это директива @apply .
У вас есть кнопка
И тут вам нужно использовать её где-то еще. Можно просто скопировать эту кнопку и вставить HTML-код в другое место. А можно открыть main.css файл и скопировать TailwindCSS-классы туда в отдельный CSS-класс.
@tailwind base; @tailwind components; .btn < @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; >@tailwind utilities;Теперь мы можем просто добавить btn как обычный CSS-класс в HTML и переиспользовать сколько угодно раз. При этом мы можем как-угодно кастомизировать нашу кнопку, просто добавляя TailwindCSS-классы.
По-моему, такой подход смотрится значительно интереснее того же самого БЭМ. Мы пишем основные свойства кнопки, а все модификации пишем не в отдельный класс, а просто поверх.
Если же модифицированная кнопка используется не в одном месте, а в множестве, можно сделать модификатор. TailwindCSS вас в этом не ограничивает, но и не заставляет. При желании можно создать отдельный класс, и уже писать btn btn-red . Подробнее в документации.
Если вы используете любой фронтенд-фреймворк, у вас вообще нет данной проблемы. Вам не нужна директива @apply . Вы просто делаете отдельный компонент для любого повторяющегося кода. Легко и удобно.
Для примера воспользуемся самым простым из возможных вариантов – Alpine.js.
![]()
Даже если вы не планировали использовать фреймворк, 7 килобайт, которые вы потратите на Alpine.js, быстро окупятся. Подробнее об Alpine.js в других моих статьях.
А если вы вместо Alpine.js используете полноценный компонентный фреймворк (React, Vue и др.), это становится еще проще. Вы просто добавляете , где внутри скрыта вся логика.
4. Писать стили в HTML – это не плохо
Как ни крути, последнюю проблему невозможно решить. Потому что здесь это основная фича. Менять нужно не фреймворк, менять нужно отношение к нему.
Большую часть истории Web писать стили в HTML-коде было моветоном. Использовать тег style было жутко неудобно, всё превращалось в жуткую колбасу, которую было невозможно разобрать. К тому же, некоторый новый функционал, например media-запросы (в TailwindCSS они есть как приставки sm: , md: ), в нем просто не поддерживались. Отформатированный CSS был элементарно удобнее.
Когда появился Bootstrap, весь предыдущий негативный опыт отразился на отношении сообщества к такому подходу. И он сохранился до сих пор, хотя объективных причин для этого нет.
При правильной реализации, описывать стилизацию вместе с разметкой оказывается невероятно удобно. Удобно видеть HTML-элемент и сразу понимать, как он стилизован. Удобно писать верстку, не перескакивая из файла в файл. Если вы писали на Vue или на Svelte, вы знаете, о чем это я.
Заключение
Так какое же место занимает TailwindCSS в истории CSS?
Он удобнее ванильного CSS и не создает проблем со вложенностью и коллизией имен классов.
Он отлично работает со всеми препроцессорами. Поэтому, если вам нужно построить базу стилей с переменными, прогнать цикл и т.п., TailwindCSS этому никак не мешает.
TailwindCSS расширяет работу по БЭМ. Вам не нужно делать модификатор для каждого случая, просто сделайте базовый стиль и перезапишите сверху, что нужно. Если модифицированный блок используется не в одном месте, а в множестве, можно сделать модификатор. TailwindCSS вас в этом не ограничивает.
С TailwindCSS пограничные случаи не будут занимать отдельный класс. Можно вообще весь код писать без самописных классов. Так решается проблема, для которой были придуманы CSS-модули.
Мне нравится формат работы со стилями, который мне предлагает этот фреймворк. Но каждый должен попробовать и решить это для себя самого. Мне рекомендовали TailwindCSS со словами: «Попробуй, потом не захочешь делать по другому». Я попробовал, и теперь мне не хочется делать по другому. Попробуйте и вы.
Напоследок один небольшой лайфхак, который показывает еще одну удобную функцию TailwindCSS: с ним стили можно очень удобно править прямо в Chrome DevTools.
Выбираем элемент, в панели нажимаем .cls , пишем классы, а затем просто копируем их к себе в верстку.
UPD: Для тех, кто еще сомневается, пару ссылок на дорожку про атомарный CSS:
- В защиту методологии Utility-First CSS
- In defense of Functional CSS (en)
Как писать css в html коде
Задаёт стили прямо в HTML-коде страницы.
Время чтения: меньше 5 мин
Открыть/закрыть навигацию по статье
Контрибьюторы:
- Алёна Батицкая ,
- Светлана Коробцева
Обновлено 13 декабря 2021
Кратко
Скопировать ссылку «Кратко» Скопировано
Внутри тега можно задать параметры для CSS-стилей, которые применяются на странице. В общем, тут ты описываешь, как будут выглядеть заголовки, ссылки, обычный текст и другие элементы страницы.
Пример
Скопировать ссылку «Пример» Скопировано
p color: red; >This is my paragraph.
DOCTYPE html> html> head> style> p color: red; > style> head> body> p>This is my paragraph.p> body> html>
Как пишется
Скопировать ссылку «Как пишется» Скопировано
Тег помещается в элемент , где находится информация, которую не видит пользователь.
/* Стили */head> style> /* Стили */ style> head>
Атрибуты
Скопировать ссылку «Атрибуты» Скопировано
- media — укажите этот атрибут, чтобы один и тот же элемент на странице отображался по-разному на разных устройствах: например, телефоне или проекторе. К примеру, хочется, чтобы основной текст выглядел крупнее на проекторе, чем при просмотре на экране компьютера. Для этого добавь атрибут media со значением «projection» и пропиши размер шрифта, например, font — size : 120 % ; . Вот какие есть варианты устройств, можно указать несколько через запятую:
- all — все устройства;
- braille — устройства, основанные на системе Брайля, которая создана для слепых людей;
- handheld — смартфоны и другие устройства с узким экраном;
- print — принтер;
- screen — стандартный экран компьютера — это значение по умолчанию;
- speech — речевые синтезаторы, а также программы для воспроизведения текста вслух и речевые браузеры;
- projection — проектор;
- tty — телетайпы, терминалы, портативные устройства с ограниченными возможностями экрана;
- tv — телевизор.
Ещё примеры
Скопировать ссылку «Ещё примеры» Скопировано
Попробуем сделать основной заголовок на странице ещё крупнее, зададим шрифты без засечек и чёрный цвет:
Кулинаный блог Марфы h1 font-size: 30px; font-family: "Roboto", sans-serif; color: #000000; >Как испечь настоящие круассаны?
DOCTYPE html> html> head> meta charset="utf-8"> title>Кулинаный блог Марфыtitle> style> h1 font-size: 30px; font-family: "Roboto", sans-serif; color: #000000; > style> head> body> h1>Как испечь настоящие круассаны?h1> body> html>А в этом примере цвет и фон текста в абзаце будет меняться в зависимости от ширины экрана:
p background-color: white; color: #663613; > p background-color: #FF8630; color: black; >Чтобы испечь настоящие круассаны.
DOCTYPE html> html> head> style> p background-color: white; color: #663613; > style> style media="all and (max-width: 500px)"> p background-color: #FF8630; color: black; > style> head> body> p>Чтобы испечь настоящие круассаны. p> body> html>На практике
Скопировать ссылку «На практике» Скопировано
Дока Дог советует
Скопировать ссылку «Дока Дог советует» Скопировано
�� Лайфхак: чтобы быстрее загружался сайт, особенно на телефоне или при медленном интернете, нужно тот код, который отвечает за отображение верхней части сайта, вставлять в в формате / * Наш C S S — код * / < / style>.
То есть туда можно встроить шапку сайта, верхние баннеры, заголовки — то, что отображается сразу при открытии. А всё, что ниже можно потом подгрузить через JavaScript после загрузки всей страницы. Так мы сразу показываем пользователю контент, он начинает его читать, а тем временем догружается нижняя часть сайта.
Больше информации о таком подходе можно найти по запросу «критический CSS».
Алёна Батицкая советует
Скопировать ссылку «Алёна Батицкая советует» Скопировано
�� Многие начинающие разработчики грешат тем, что прописывают стили прямо внутри HTML-разметки при помощи тега . Так делать не нужно.
Один из принципов вёрстки: разделение содержимого и оформления. Содержимое это разметка страницы, а оформление, соответственно, CSS-стили.
Не редки ситуации, когда после вёрстки сайт натягивается на систему управления — CMS. Из HTML-разметки создаются шаблоны, для подтягивания данных из панели администратора используется PHP.
Как итог после таких манипуляций менять HTML будет достаточно проблематично и потребует дополнительных знаний. А вот доступ к стилям, если они вынесены в отдельный файл, у тебя останется. Таким образом можно будет полностью преобразить сайт, не меняя при этом разметки.
Если стили будут зашиты в HTML поменять внешний вид сайта будет также сложно, как изменить разметку.
�� Тег можно использовать для быстрой проверки гипотез. Например, у тебя есть догадка, как решить задачу, но нет уверенности. Накидай варианты решения прямо в HTML и проверь в браузере.
Хотя удобнее делать то же самое в инструментах разработчика самого браузера ��
�� На самом деле тег можно размещать вообще в любом месте страницы, не обязательно в и это будет работать! Но делать так не стоит ��
Правила оформления HTML-кода
Отступы позволяют визуально оценить структуру документа и быстро переключаться между его фрагментами. Размер отступа настраивается в редакторе. Также во многих редакторах можно включить отображение пробельных символов и преобразовать отступы.
1.2 Теги и атрибуты записываются в нижнем регистре
Символы нижнего регистра не привлекают к себе большого внимания, и вам легче будет найти нужный.
1.3 Отдельные логические блоки отбиваются пустой строкой
Это облегчает работу с кодом и визуально создает структуру документа.
1.4 Используйте только двойные кавычки
При написании значений атрибутов используйте только двойные кавычки.
1.5 Не ставим пробелов перед и после символа =
Поскольку правая часть непосредственно относится к левой, то атрибут и его значение должны быть написаны без пробелов.
1.6 Между атрибутами один пробел
Не используем переносов строк между атрибутами, только один пробел. Перенос строк принят в css-документах, но не в html-разметке. Пишите все атрибуты элемента в строку.
1.7 Одиночные теги без закрывающего слэша
Не используйте закрывающий слэш у одиночных тегов (
,
и другие). Этот элемент является пережитком прошлого, когда HTML был более строгим, а браузеры не умели распознавать и исправлять ошибки.2. Валидность
Html-документ должен проходить проверку на валидность. Для проверки используйте валидатор.
3. !DOCTYPE
Первой строчкой в HTML-документе должен идти актуальный doctype . Это необходимо чтобы браузер верно отображал страницу. Это обеспечит единообразное отображение во всех современных браузерах.
4. Кодировка
Кодировка символов в html-документе всегда должна быть указана явно. Это обеспечит верное отображение текста. Кодировка utf-8 подходит всегда, за редким исключением.
5. Подключение стилей
Файлы со стилями подключаются внутри тега при помощи . Атрибут type для тега указывать не нужно, так как значение text/css устанавливается по умолчанию.
Хорошо: стилевой файл подключён в секции head Плохо: стилевой файл подключён в секции body
6. Подключение скриптов
Скрипты при загрузке блокируют отображение содержимого страницы. По этой причине следует подключать их в самом конце html-документа.
При подключении скриптов в теге атрибут type указывать не нужно, так как значение text/javascript устанавливается по умолчанию.
Хорошо: скрипт подключается перед Плохо: скрипт подключается в секции
7. Атрибуты и их порядок
У HTML-элементов атрибут class пишется первым. Единообразное написание помогает легче считывать код и по классам быстрее разбираться в назначении блоков.
Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для схожих элементов.
8. Логические атрибуты
Для логических атрибутов (например, checked , disabled , required ) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
9. Подписи input
Для улучшения опыта пользователя, при нажатии на подпись поля, само поле должно активироваться. Для этого поле формы связывается с описанием при помощи идентификатора и атрибута for тега .
Хорошо: элемент формы radio связан с подписью через id и for Хорошо: элемент формы radio и подпись обёрнуты в label Плохо: подпись не связана с элементом формы
10. Атрибут языка
Для элемента в атрибуте lang должен указываться верный язык документа. Это помогает системам перевода определить, какие использовать языковые правила.
Давайте писать HTML-код, как профессионалы
Подпишись на наш телеграм-канал TechRocks WEB-разработка?
Перевод статьи «Let’s write HTML like a pro».
HTML напоминает ребенка, с которым никто не играет, потому что JavaScript и CSS отвлекают внимание на себя. Сегодня мы рассмотрим несколько вещей, способных помочь вернуть этого «ребенка» в центр внимания.
Все, описанное здесь, – часть создания чистого, поддерживаемого и масштабируемого кода, в котором должным образом используются семантические элементы разметки из HTML5 и который правильно отображается в поддерживаемых браузерах.
DOCTYPE
Начнем с самого верха вашего index.html. Обязательно декларируйте DOCTYPE. Это активирует стандартный режим во всех браузерах и уведомляет их о том, как следует интерпретировать этот документ. Имейте в виду, что DOCTYPE не является элементом HTML.
В HTML5 это выглядит следующим образом:
Примечание: если вы используете фреймворк, эта часть будет заполнена без вашего участия. В противном случае я настоятельно рекомендую использовать сниппеты вроде Emmet, доступные в VS Code.
Хотите узнать побольше о других типах документов? Можете почитать об этом здесь.
Опциональные теги
Некоторые теги в HTML5 опциональны, главным образом потому, что элемент присутствует неявным образом. Это может показаться странным, но вы вполне можете пропустить тег , и страница все равно прекрасно отобразится.
Hello Welcome to this example.