Closed7
CSSで意識していることを雑多に書く（～2023年10月）
とらべらーHTML/CSS/JavaScript のコーディング時に最近導入中・導入検討中のものを雑多に書く場所。
10月中にざっくりまとめて11月か12月には記事としてまとめて投稿したい。
とらべらー.c-button { /* ボタンの基本スタイル */ }
のクリックできないときのスタイルを、
.c-button.is-disable { /* クリックできないスタイル */ }
じゃなくて、
.c-button[tabindex="-1"] { /* クリックできないスタイル */ }
ってやってみた。
こっちのほうがCSSだけでどういう役割か伝わりやすそう🤔
とらべらー似たような類でボタンとかだと、
<button class="c-button-primary c-button-xl" type="button">ボタンを押下する</button>
じゃなくて、
<button
class="c-button"
data-type="primary"
data-size="xl"
type="button"
>ボタンを押下する</button>
にして、CSSも
.c-button[data-type="primary"] {
/* ~~~ */
}
.c-button[data-size="xl"] {
/* ~~~ */
}
みたいに書いたり。
とらべらーFLOCSSで書かないときは、
スネークケース（_）で書く。
理由
- ダブルクリックで全部選択できる
- BEMとの親和性・拡張性とか
とらべらーレイアウトパターンとコンポーネントパターンを組み合わせる。
レイアウトパターン
2カラム、3カラムなどのカラム数・カラム幅を指定するグリッドレイアウト。
コンポーネントパターン
余白や横幅、GAPなどはグリッドレイアウトで柔軟に変わる。
とらべらーこれに関してはこれだけで1記事書きたい。
とらべらー11月なっちゃってるので、12月くらいにまとめてアドベントカレンダーとして投稿したいところ。。。
ストック的に構成だけでもGitHub上に記載しましょう。。。
このスクラップは2023/11/09にクローズされました