#utilityfirst — Public Fediverse posts

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

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

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

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

Atomic CSS: верстка и легкость бытия

Здравствуйте, товарищи! Меня зовут Валентин, и сегодня мы снова поговорим про Atomic CSS! Обсудим имеющиеся проблемы в верстке и посмотрим, как атомарный подход их решает (или не решает). Разберем основные мифы, посмотрим на хорошие практики этого подхода и сделаем некоторые выводы. Эту статью можно отчасти считать продолжением моей предыдущей по данной теме. Но если там был хардкор и технические детали, то здесь уже разберем прикладные вопросы: как верстать в Atomic CSS, чтобы получить заявленный эффект.

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

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

🎉🚀 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

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 #бэм

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

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

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

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

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/