CSSのutilクラスを使うコードをたまに見かけたり、utilクラスどうですかって聞かれることがあるので、日頃思っていることを雑にメモして置きます。
結論
個人的にはあんまり好きでないです。使わないですむなら使わないほうがいいんじゃないかと思っています。
(言いたいことはmorishitterさんの記事に既によくまとまってたりしますが、あえて書きます。)
理由
主に2つあります。(ちょっと似たような理由だったりします)
1.何故そのクラスがついてるのかあんまり良くわからない。
たとえば下記のようなコードと
<div className="l-panel u-mt-32 u-mb-24">
<div className="u-cf u-mb-12">
<div className="u-flt-r">
<label className="u-inline-block u-fw-b u-mr-12">....
以下のようなコードがあった時
<div className="health_checkup_category_header">
<div className="category_title">{props.categoryName}</div>
<div className="checkup_dates">
どちらのほうがメンテしやすいかという話ですが、僕は後者のほうがメンテしやすいと思います。
理由は、後者のほうが実装意図が明確だからで、何に対してそのクラスをつけた(何を一塊とみなしてレイアウトしたか)がひと目で分かるからだと思います。
CSSのクラス名は単に適当な名前を与えているのではなく、情報設計に対して名前を与えていると思うので、適切な名前を与えておいたほうが良いと思います。
2.それはもはやstyleべた書きとあまりかわらない。
詳細度が違うので、厳密には違いますが、それってstyle書いてるのとあんまり変わらなくね?って思っています。
これって
<div className="u-mt-32 u-mb-24">
要は
<div style={{marginTop: "32px", marginBottom: "24px"}}>
みたいに。というか単に読みにくく省略しただけでは、という気さえします。
アプリケーションコードを書いている時に、謎に省略した変数とかを使ったりしないと思うのですが、CSSについても同じようにしておいたほうがいいのではないかと思います。
とはいえ面倒?
とはいえ、現実的にはいちいちCSSかくの面倒だったり、特に命名考えるの面倒だったりということあると思います。そんなにいろいろCSSのクラス名思いつかねーよみたいな。
あと、コンポーネントを汎用化したいが、それを配置するためにutil使いたいとか言うケースもあると思います。
個人的には、そういう場合のためにプロジェクトで配置用のクラス名のルールを持っておけばいいのではないかなと思います。<componentName>Wrapper
とか<componentName>Layout
という名前にするという決まりだけ作っておいて、そのコンポーネントを使う時は、使う側のコンポーネントに簡単な配置用のクラスだけを定義するというのがいいかなと思っています。こうしておけば、何に対してデザインを当てているかがわかるし、どういう意図(今回はコンポーネントを配置しようとしている)ということが明確になると思います。
CSSってクラス名考えるのが一番大変な時があるので、一定のルールを作っておくのはオススメです。