[Перевод] Как совместить утилиты и рукописный CSS в атомарном подходе?

Всем здравствуйте, дорогие читатели! Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий. В этой статье мы поговорим о том, нормально ли применять в рамках Atomic CSS подхода рукописный CSS. Бытуют разные мнения по этому поводу. Кто-то считает, что в атомарном подходе нужно использовать только утилиты, а кто-то допускает и произвольные сочетания рукописных CSS классов с ними. Я постараюсь разобраться в этом, аргументируя свою позицию.

https://habr.com/ru/articles/990428/

#atomic_css #mlut #tailwindcss #css #cssфреймворк #cssанимации #верстка #sass #utilityfirst

Как совместить утилиты и рукописный CSS в атомарном подходе?

Всем здравствуйте, дорогие читатели! Меня зовут Рамазан, я Frontend-разработчик, энтузиаст и я люблю исследовать грани возможностей современных Web-технологий. В этой статье мы поговорим о том,...

Хабр
🎉🚀 Introducing TailwindSQL: because your SQL queries were just begging for a utility-first approach! 😂 Now you can over-engineer your database calls in React Server Components with style! ✨
https://github.com/mmarinovic/tailwindsql #TailwindSQL #UtilityFirst #SQLQueries #ReactServerComponents #OverEngineering #HackerNews #ngated
GitHub - mmarinovic/tailwindsql: TailwindSQL lets you write SQL queries using Tailwind-style class names.

TailwindSQL lets you write SQL queries using Tailwind-style class names. - mmarinovic/tailwindsql

GitHub

Atomic CSS Deep Dive

Здравствуйте, товарищи! Меня зовут Валик и в этой статье мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы. Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные решения для работы в этом подходе и сравним их с моим изобретением - mlut . Разберем проблемы известных инструментов и посмотрим, как я решил их в своем. Будут интересные архитектурные решения, технические детали и немного хардкора. Те, кто занимается версткой, смогут по-другому взглянуть на Atomic CSS и, возможно, взять в работу новый инструмент. А те, кто пишет системный код и тулинг - получить вдохновение и перенять нестандартный опыт.

https://habr.com/ru/articles/833712/

#atomic_css #tailwind #css #mlut #utilityfirst #верстка #html #sass #javascript #бэм

Atomic CSS Deep Dive

Здравствуйте, товарищи! Меня зовут Валик и сегодня мы поговорим про подход Atomic CSS в верстке, разработку инструментов и смежные темы. Кратко вспомним базу - почему Atomic CSS. Рассмотрим популярные...

Хабр

Tailwind vs BEM — 2 (архитектура)

Статья рассматривает возможные задачи верстки на разных проектах и как с ними справляются две разные архитектуры: Tailwind CSS и ванильный CSS + BEM.

https://habr.com/ru/articles/774814/

#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst

Tailwind vs BEM — 2 (архитектура)

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

Хабр
Tailwind vs BEM — 1 (сравнение производительности)
В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора будет зависеть очень многое на поздних этапах разработки и оно должно быть очень хорошо обосновано. Начну со сравнения производительности. Tailwind позволяет значительно уменьшить размер итогового CSS и тем самым ускорить время отображения страницы. Но это сработает только в том случае, если Tailwind классы будут написаны прямо в HTML коде, а не в виде @apply в CSS. Tailwind уменьшает CSS, но увеличивает HTML. Давайте посчитаем разницу с учетом HTML. Будем сравнивать чистый Tailwind с чистым CSS + BEM.
#tailwind #tailwindcss #tailwind_css #bem #css #utilityfirst
https://habr.com/ru/articles/774524/
Tailwind vs BEM — 1 (сравнение производительности)

В этих двух статьях я буду сравнивать TailwindCSS с чистым CSS + BEM. Цель - разобраться что является лучшим решением для хорошей архитектуры приложения. Это не вопрос предпочтений, от этого выбора...

Хабр