宣言ブロックのCSS設計 - kojika17

日本語で「CSS設計」を検索すると、記事やつぶやきなどでセレクタの命名規則に関する話題が多いです。 CSSを設計する上で、命名規則は重要な要素でしょう。 簡単なセレクタ名だと他のスタイルと重複する可能性もあります。他のスタイルと重複しないようにセレクタの子孫数を増やしてしまうと、今度はスタイルの取り回しが悪くなります。 またデザインをコンポーネントに分ける粒度について紹介されていますが、命名規則の分け方のように紹介されているよう感じます。 論理的に構造をわけて命名していくため、覚えやすく、伝えやすさもあわさって、現在の「CSS設計 = 命名規則」のような構図ができあがったと感じています。 CSS設計は命名規則だけか 命名規則はCSS設計において、重要な要素です。 しかしCSSは命名規則させ気を付ければ良い、というものではありません。 私は、すでにあるサイトの一部のコンテンツの作成やすでに用

[thleap]

「宣言ブロックで意識するポイント」以下で具体的な良い宣言、っていうのが紹介されててよかった。

[kojika17]

【1年ぶりにブログ書いた】

[wdr_s]

確かに、クラス名の命名よりも、CSSの本質は宣言ブロックにあるので、こちらをおろそかにすると、BEMとかOOCSSとか取り入れても全く意味がない。

[nekosann_08]

不揃いで気持ち悪いからとボタン類にwidth設定された日々が蘇る蘇る・・・。/ ボタン類にdisplay:table;はだめかな ？(´･ω･`)

[taky1973]

地味だがすごく大事、簡単そうですごく難しい部分。

[norip44]

たしかに、こういった「打ち消し部分」とか、案外ナアナアにしてた…。チームでCSS書くならだいじ。

[for-g]

ちゃんと読んで勉強します。

[oki448jp]

宣言ブロックのCSS設計

[htn_50koma]

宣言ブロックのCSS設計｜Web Design KOJIKA17

[efcl]

ブロックレベルでのCSS構造について。 `display:block`や`display:inline`の意味合い、コンテンツとマージンの問題、コンポーネント自身が持つ`max-width`の表現

[wazanaka]

“ box-sizing: border-box; ”

[hachiame]

確かにwidthを設定しなくても、コンテンツに適したサイズに調整してくれるので、極力、width指定しないほうがメンテナンス性が高い。新人に読ませたい内容。

[hs_hachi]

ちゃんと読もう

[kk6]

ほんとこれ大事

[rjge]

最近cssいじってて辛い思いしたからめっちゃありがたい記事

[copperpot]

あとでじっくり読みます……。CSSを勉強中の人もぜひ読んでみて。奥が深いよ～

[kajikawa454]

CSSはおくぶかい

[sucelie]

CSSもそろそろ抜本的な改革して欲しい・・・

[assaulter]

こういう記事を待ってたんだよ！！！！

[kayamak1]

“Code smells in CSS”

[mattarin]

すごく丁寧

[hase0510]

Wordのスタイルでもこういうことをしたいんだけどなあ。互換性に縛られてるせいかずっと古いアーキテクチャが維持されてますね。

[junk-boy]

“無駄な継承する宣言を削除するだけで、見た目も正常になり、CSSの記述量も減らせます。 もし「text-align: left;」宣言を削除せずに、下記のようなスタイルを追加していくと肥大化しやすいCSSになります。 「text-align: left;」

[lotus_tribal]

熟読熟読っ

[tttttahiti]

経験則みたいに思っていたことがまとまって書かれていて良い

[i_am_aoi]

この職について5年くらい経つんだけどようやくこれが分かってきた。デザイン起こす時点で間隔やフォント合わせておいて欲しいのもこの関係なのでその時点から設計は始まっている

[idr_zz]

読み応えあり。優先順位を考えると無駄のない記述ができる。 宣言ブロックのCSS設計｜Web Design KOJIKA17

[hedeyoshi]

わかりやすい

[hmd703]

「制作者に精神ダメージを与える強力な呪い」w

[ysk_lucky-star]

むしろこれができて初めてCSSの設計が可能になるよね。だからこの前提で「CSS設計をどうしてますか？」と聞く

[z_dogma]

勉強になる

[karikari1255]

例がわかりやすい。どうしても命名規則とスコープにばかり目が行きやすいから気をつけよう

[mizutanaka]

CSSに関する設計の効率化の参考