短いクラス名で運用できる CSS設計 rscss を CSS Modules 向けにアレンジしてみた

はじめに この記事は #EveOneZenn (Everyday One Zenn) vol.09 です。 CSS設計のひとつである rscss を CSS Modules (React向け)にアレンジしてみたので紹介します。 紹介する規約を使った場合、下記のようなクラス名で CSS Modules を運用できます。 import React from 'react'; import cn from 'classnames'; import styles from 'styles.module.scss'; const Component = (props) => ( <button className={cn( styles.searchButton, { [styles.Disabled]: props.disabled } )} > <span className={styles.i

[d4-1977]

CSSの設計、悩むよね…というのと、キチンとlintを用意したり、フォーマッター用意するのフロントエンドの人がいない場合、とても大切だと思うのです