Модульные CSS-архитектуры в Next.js: BEM, SMACSS, OOCSS и их применение

Привет, Хабр! Сегодня пробежимся по теме, которую не назовёшь новенькой, но без неё — ни шагу в CSS-вёрстке в Next.js. Модульные CSS-архитектуры — это необходимый инструмент для тех, кто хочет создать прочную основу для масштабируемого проекта. В статье разберём, как с помощью BEM, SMACSS и OOCSS можно держать CSS в порядке.

https://habr.com/ru/companies/otus/articles/855642/

#nodejs #BEM #SMACSS #OOCSS #CSS #typescript

#OOCSS の時代からすでにリアルタイムで #CSS 書いてた世代なので、特に前半はノスタルジーもあって頷きすぎちゃう内容だった。

後半の内容では、とくに #TailwindCSS がコンポーネント管理を #JavaScript 側で行うようになってきた状況の中で使われはじめた、みたいな話は、そうだよね〜と思うし、今後を考える意味で大事な視点だと思った。

最新 #CSS の機能（\@Layer とか \@Scope とか、もう少し前から使えるものだと CSS 変数とか）は、そういう #JavaScript フレームワーク側でコンポーネント管理が行われる環境と #TailwindCSS の組み合わせが解決した問題の一部を #CSS の領域で解決するという点でかなり強力だし、しかもそれが #JavaScript フレームワークに依存しない Web 標準 #CSS の仕様としてブラウザの中に実装されてるということを踏まえると、

個人的意見としては、なんでも #JavaScript の中に書いて管理するという最近の開発環境から、もう少し #CSS を中心持ってきて考えてもいいんじゃないかと思ってる  

と、それらしい文章にまとめてみたけど、自分はとにかく #CSS が好きなので、つまるところ #CSS を #CSS として書かせてほしいだけなんだけど   

https://speakerdeck.com/shinkufencer/the-aims-of-object-oriented-css-and-the-current-state-of-css-usage

Méthodologie(s) #CSS

— #OOCSS ;
— #SMACSS ;
— #BEM ;
— #BEMIT ;
— #ITCSS ;
— Classes utilitaires-atomiques…
Edit :
— #cubeCSS https://cube.fyi/ ;
— #CSSModules ;
— #SUITCSS.

Mais encore ?

Avez-vous d'autres méthodologies en tête ?
Ou en sommes-nous aujourd'hui ?

(Sans oublier les CSS à l'ancienne, profitant bien de l'héritage et la cascade, sans convention de nommage particulière, et qui peut tout à fait convenir pour un petit projet personnel amateur.)

Past informs the present: Our approach to CSS · The evolution of CSS and its methodologies https://ilo.im/10bo7u · by @colepeters

_____
#development #approaches
#WebDevelopment #webdev #CSS #AtomicCSS #BEM #OOCSS #CSSinJS #CSSmodules #ShadowDOM #WebStandard