#статья дня

#scss #styledcomponents #emotion #cssinjs #posh

Я тут узнал слово новое, точнее, аббревиатуру: POSH. Plain old semantic HTML. Забавно, но я эту аббревиатуру вообще впервые слышу… Ну да ладно, речь не об этом.

Когда разрабатываешь наборы своих компонентов, очень часто задумываешься: а что делать когда у тебя кнопка может быть частью, например, группы кнопок или тулбара и менять при этом свой вид?

Конечно же приверженцы БЭМ скажут: модификатор ставь. И закроют вопрос.

Эээ, погодите… но на этом моменте нам придётся уйти в Телеграф, потому что Телеграм вертел все мои потуги выкатить исходный код.

Там вы узнаете про магию кеширования родительских селекторов (нет, обратных селекторов всё ещё не подвезли).

https://telegra.ph/Keshiruem-selektory-zdes-i-sejchas-01-07

#статья дня

Я давно обещал написать статью о Styled Components, особенно когда число вопросов превысило разумные пределы. Но так получилось, что нельзя написать о SC без того, чтобы не объяснить, что такое CSS-in-JS вообще и как мы дошли до жизни такой. Подсказка – в иллюстрации к посту.

Как и всегда, статья выходит за пределы канала. Но на сей раз – не на внешний сервис, а на наш собственный сайт. Работа над ним только началась, но большие статьи переедут туда.

И как всегда, приглашаю обсудить в @htmlshitchat

P. S. обновлено, кнопка не работает, ибо домен решено не оплачивать. Работают ссылки.

#css #js #cssinjs #jss #styledcomponents

#инструмент дня

Tailwind CSS при всех своих спорных моментах понравился многим людям. Кто-то не парится и пишет все атомы в классы, кто-то берёт компонентный подход и собирает компоненты на базе его DSL (domain-specific language), чтобы потом скомпилировать их в чистый CSS. Но, оказывается, есть и альтернативный подход: panda.

Что такое Panda CSS? Это CSS-in-JS движок, который собирает человекочитаемые атрибуты или пропсы компонентов в атомарный CSS-файл. Да, в файл, который создаётся в момент сборки, не в рантайме!

Есть три варианта описания стилей, мне больше всех импонирует компонентный подход, с пропсами.

В общем, такой атомарный CSS мы покупаем.

#css #react #cssinjs

#библиотека дня

Всем же знаком UI-kit, а нынче уже целая дизайн-система, MUI?

Раньше назывался MaterialUI, несложно догадаться, почему так назывался и почему в итоге переименовались.

Эти ребята двигали идею CSS-in-JS чуть ли не с самого появления концепта. Сначала они использовали JSS, потом дикую смесь из JSS и Emotion, что приводило к, мягко говоря, мучениям.

По всей видимости, они сами наелись и решили перейти к созданию своего CSS-in-JS фреймворка, основанного на проекте WyW-in-JS
(на котором основан Linaria): Pigment CSS.

Как и многие современные альтернативы, стили Пигмента будут собираться в статичный CSS (с CSS-переменными), а API уже стандартно напоминает Styled Components:

const Button = styled('button')({
  border: 'none',
  padding: '0.75rem',
  // ...other base styles
  variants: [
    {
      props: (props) => props.variant !== 'contained',
      style: { backgroundColor: 'transparent' },
    },
  ],
});

Документация небольшая, но полна примеров. Плюс, учитывая распространённость MUI, у Pigment есть все шансы на распространение. Как минимум, насильно :)

Правда, мне кажется, что теперь мы получим три CSS-фреймворка в одном UI-ките одновременно...

#css #cssinjs #mui

#новость дня

Ну что же, скажем Styled Components пока-пока!

https://opencollective.com/styled-components/updates/thank-you

Спасибо им, что показали нам, как можно работать с компонентами. Правда и цена оказалась высока.

Пока коллективный CSS-in-JS динозавр решал проблему экстракции CSS из бандла, растеряв мощь Babel под натиском Rust-решений, подтянулись млекопитающие вроде Tailwind и заняли нишу гораздо быстрее, мощнее и эффективнее.

С бесплатной экстракцией в том числе, да. И не ограниченные фреймворками.

Маятник мощно качнулся. Я не любитель Tailwind и, возможно, предпочту CSS Modules, но надо признать, что работу они проделали прекрасную.

Помянем, в общем.

А вторая новость — кратко: вышел Parcel 2.14.0 c поддержкой React Server Components!

Они подчёркивают, что Parcel сам по себе не фреймворк, но обеспечивает необходимый минимум и позволяет строить фреймворки уже на его базе.

Дивный новый мир!

#cssinjs #styled #parcel #tailwind