Корисний ресурс тижня: CSS-Tricks
DOU продовжує освітню рубрику: раз на тиждень ділимось ресурсами, які можуть прискорити розвиток у професії і дати реальну практику. Рубрика виходить щоп’ятниці.
Ви можете стати частиною процесу: надсилайте нам рекомендації, який саме ресурс виявився для вас корисним. Тож поділіться такими ресурсами зі спільнотою — запропонуйте через гугл-форму, або ж надішліть топік з поміткою «Ресурс тижня» самостійно чи пишіть мені :)
А тепер — до рекомендації цього тижня!
CSS-Tricks
Цього тижня в рубриці ділимося легендарним ресурсом для всіх, хто має справу з фронтендом. CSS-Tricks — це величезний архів статей та гайдів. Вони вже багато років залишаються золотим стандартом у світі верстки.
Як це працює
Це такий собі візуальний довідник і шпаргалка, яку варто тримати під рукою. Забули, чим відрізняється justify-content від align-items, або як правильно прописати медіазапит — просто відкриваєте потрібний гайд і одразу бачите зрозумілі приклади з кодом.
Гортайте вбік, щоб подивитися всі зображення
Чим корисно
На сайті зібрані розбори буквально на всі випадки життя. Flexbox та Grid, великий мануал про всі існуючі способи відцентрувати елемент, також є класні матеріали про сучасні фішки типу Container Queries, правильне налаштування Dark Mode, роботу з градієнтами, функціями кольору та адаптивністю.
Для кого підійде
Для початківців, які тільки намагаються приборкати верстку і зрозуміти, чому кнопка раптом з’їхала. А також для мідлів, сеньйорів та бекендерів, яким потрібно швидко згадати синтаксис.
Ціна питання
Усі матеріали абсолютно безкоштовні.
Пишіть у коментарях, як ви свого часу вивчали CSS. І цікава ваша думка: чи варто зараз новачкам занурюватись у верстку так само глибоко, якщо ШІ-асистенти вже досить непогано генерують стилі? Чи без фундаментального розуміння далеко на згенерованому коді не заїдеш?
3 коментарі
Додати коментар Підписатись на коментаріВідписатись від коментарівAI генерує scss набагато гірше ніж js. Токенов жере неміряно, а результат часто навіть не компілюється або в результаті генерує не те, що потрібно, навіть з дуже строгими промтами.
Довільно видаляє/додає шматки кода, змінює імена змінних, просто так, сподіваючись «а раптом заробить». Точно як джуни в кінці нульових на успіх писали zoom: 1, AI пише display: flex для всього. А якщо підключити MCP Figma то токени відлітають просто в космос.
Але варто перейти на написання функцій sass — раптово пише нормальний код. Просто AI не має бази для навчання css. 10 років js only на сайтах, блогах, не пройшли даремно.
У результаті питання «що робимо» — якщо кнопочки у додатку розфарбовувати, то можна не вивчати css. Якщо робити з нуля дизайн-системи, enterprise-сайти — то без розуміння що генерує AI — буде м’яко кажучи важко.
Спробуйте з tailwindcss, або з чимось типу shadcn/ui
Так мова про величину контекстного вікна, що може зростати при написанні великих дизайн-систем + необхідності бачити результат рендерингу та взаємодії різних компонентів.
Немає проблеми написати стилі окремого компонента, його AI щодо нормально напише хоч на Tailwind, хоч на кастомізації Bootstrap, хоч із нуля. Проблеми у AI починаються коли компоненти взаємодіють один з одним, коли потрібно правильно прокидати Design Tokens і т.д.