『ざっくりつかむCSS設計』を一緒に読もうの会

高津戸 壮さんの新著『ざっくりつかむCSS設計』を題材に、本を読み進めていく形で理解を深めます。 https://cssnite.doorkeeper.jp/events/131253
14
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

この前書いた自分の本でも1章分CSS設計の章書いたけど、妥協ポイントとかの考え方まで割と似てて謎の安心感に包まれているところw #cssnite

2022-01-06 15:31:03
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

最近はNormalize.cssを読ませた上で部分的に一部resetを追加するところに落ち着いてるかなぁー。 #cssnite

2022-01-06 15:36:06
Akira Maruyama/丸山 章 @akira_maru

もしかして基本はBEMにして、SCSSとかなら@extend で他のセレクターの内容読み込めるからそれで対応するのかな? #cssnite

2022-01-06 15:41:12
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

html:lang(ja) っていう書き方初めてみた… 属性セレクタはいつもhtml[lang="ja"]で書いてる。 #cssnite

2022-01-06 15:48:58
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

ユーティリティクラス使いすぎると BEMがぶっ壊れるw #cssnite

2022-01-06 15:53:17
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

大きなサイトの一部として本体サイトの共通CSSを読み込んだ上でそれとは違う独自スタイルを要する子サイトを作るときなんかに、不用意に共通部分にスタイルが影響しないように接頭辞つけて設計するとか割とあるなぁー。 #cssnite

2022-01-06 16:04:14
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

実装的には何パターンから選べ方式でできたら嬉しいけど、下請けでやってるとまずそれで済むことは無い…。 自社開発案件なら可能かなー。 #cssnite

2022-01-06 16:11:17
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

paddingの足し算で設計するのは難易度高すぎる〜。 後でどうなってたのか全然わからんくなる〜。 #cssnite

2022-01-06 16:16:52
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

余白の設計って、それだけで本一冊書けそうなくらい奥が深いですよね… #cssnite

2022-01-06 16:20:06
にゃんこ🍥マークアップの人(お仕事募集中) @ake_nyanko

あー、ブロックエディタだとBlock自体に余白ついてた方が都合良かったりするかー。 #cssnite

2022-01-06 16:27:49
Takazudo @Takazudo

ありがとうございました! #cssnite

2022-01-06 17:08:19
にゃっつ@WEB制作エンジニアになる! @nyattsu72

余白の部分すごく勉強になりました! 今一番の悩みは余白で、上下につける余白はパターンが増えて余白のルールを打ち消すユーティリティを用意したりとカオスになることがあったので、 余白についてもう少し考えようと思います💦 Bootstrapは完全同意でしたw #cssnite

2022-01-06 17:14:00
ひろさん|Web制作(コーディング) @hirofont

💠学び日誌 ‣『ざっくりつかむ CSS設計』を一緒に読もうの会 延長も含め約3時間と充実のウェビナーでした。講義で取り上げたCSS設計はBEMとSMACSS。高津戸さんの解説&スライドが小難しさを和らいでくれる。個人的には余白の設計が一番の学びでした。書籍とアーカイブで理解を深めます。 #cssnite

2022-01-06 20:00:01