めろたんのアレ

色々書いてくやつ

CSSのアレをアレコレしてアウトラインを引いて可視化する件について

これをみて、これ便利だよね〜ってなったけど意外とみんなしらない？？？みたいなアレになったので、どこに需要があるかもわからんが個人的に好きなのでまあ書いておく。 僕のブログだし。

使うときどうやってるか

個人的に使うときはここにざっと書いたけどまあそういうことっすわ。
実際に例を書く。

例えばflocssの設計で書いたとき

github.com

命名規則はレイアウトなら .l-* か #hoge で、 コンポーネントは .c-*、 プロジェクトは .p-* みたいな感じだね。 じゃあ雑にそれをつかって無を書く。
書いて本題のやつもやる。

やったのが以下

See the Pen cssのプレフィックスつけると便利っていう話 by renyamizuno (@renyamizuno) on CodePen.

はい。

codepenのタブのCSSってのを押すとCSSが見れたりするのでHTMLとか見ながらふむふむしてくれ〜。

[class^="l-"] みたいなセレクタを使うことでクラス名の頭にl-がついているやつ。みたいな選択ができ、そいつにスタイルを当てることができると。 なんかめんどくてborderにしたけどbackground-color で rgba とかつかって少し透過した感じにしたりするとなんかそれっぽくなってオシャレになると思う。*1

と、まあ命名規則ちゃんとしてやるとこういう使い方もできて便利なときは便利だよ〜という話でした。 昨今はなんていうの？ css in js ？ とかそういうのでコンパイルしちゃって .vthdoi2 みたいなクラス名になっちゃったりしてアレなことが多いかもしれないけど、こういう(古というかなんと言えばいいかわからん。)のも使えるといいんじゃねえかな〜って思ったりするよ〜っていう話でした。

*1:それがメインのやりたいことじゃないのでアレだとは思うけど