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

2017/07/18 18:20:38

kojika17

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

2017/07/18 19:45:08

yoshiko_pg

わかる “命名規則やコンポーネントの分け方も大事ですが、「CSS設計 = 命名規則」という構図に、常に違和感を感じていました” / 例もわかりやすい

2017/07/18 19:50:36

macky1207

「最後に」の部分が真理だな

2017/07/18 20:16:21

masuP

“CSS設計にはプロパティや値の選定も必要” コレ

2017/07/18 21:49:48

wdr_s

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

2017/07/18 23:25:56

umai_bow

いい記事。CSSは勉強すれば少しずつ綺麗に設計できるもの

2017/07/18 23:57:52

Nyoho

これはものすごくいい

2017/07/19 00:14:55

boobook

この感覚は何度も何度もCSS書いて失敗しないと分からない。

2017/07/19 02:02:59

aatoku

わかりゅ

2017/07/19 02:52:21

akapeso

あとで読む

2017/07/19 06:39:35

glat_design

久しぶりにブログ書いてる…！！ /

2017/07/19 08:21:22

nekosann_08

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

2017/07/19 08:25:20

n314

リファクタリングが目視なのがつらい。

2017/07/19 08:37:59

chienavi

感覚的なものなのか、経験的なものなのか

2017/07/19 08:39:33

kitaj

「CSS設計にはプロパティや値の選定も必要」

2017/07/19 09:17:36

frozenjelly

良記事。HTML/CSSってコーディングが汚かったり若干間違ってても案外うまく表示されちゃうから、あまり意識しないで継ぎ足しまくってしまい、いつの間にかグチャグチャになりがちなので。

2017/07/19 09:19:56

issy_s16

あとでよむ

2017/07/19 09:30:44

mizutanaka

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

2017/07/19 09:34:37

karikari1255

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

2017/07/19 09:42:29

z_dogma

勉強になる

2017/07/19 09:51:28

ysk_lucky-star

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

2017/07/19 09:59:08

hmd703

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

2017/07/19 10:52:04

garage-kid

386

2017/07/19 11:00:17

hedeyoshi

わかりやすい

2017/07/19 11:03:43

idr_zz

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

2017/07/19 11:09:32

i_am_aoi

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

2017/07/19 11:22:30

tttttahiti

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

2017/07/19 12:06:09

aknk2

あとで読む

2017/07/19 12:10:20

lotus_tribal

熟読熟読っ

2017/07/19 12:12:02

a006315851

ITCSSおすすめ

2017/07/19 12:22:56

sai0ias

デザイナ（コーダー）こそリーダブルコード読むべきだと思っている。

2017/07/19 12:39:00

junk-boy

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

2017/07/19 12:40:00

hase0510

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

2017/07/19 12:53:01

mattarin

すごく丁寧

2017/07/19 13:18:33

kayamak1

“Code smells in CSS”

2017/07/19 13:26:36

assaulter

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

2017/07/19 13:33:08

sucelie

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

2017/07/19 13:40:24

jeffreyfrancesco

いい記事 / とりあえず幅設定するって人確かによくいる、そしてそういう人に限って`* { box-sizing: border-box }`とかやりたがる

2017/07/19 13:50:19

haru-reiji

CSSにしろ新しいやり方ばっかり模索して習熟度が上がらない、5年くらい使い込めば良し悪しもわかる気がするけど

2017/07/19 15:11:39

kajikawa454

CSSはおくぶかい

2017/07/19 15:33:20

copperpot

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

2017/07/19 17:31:20

rjge

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

2017/07/19 20:48:10

kk6

ほんとこれ大事

2017/07/19 22:51:55

hs_hachi

ちゃんと読もう

2017/07/20 10:10:35

hachiame

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

2017/07/20 11:22:34

thleap

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

2017/07/20 13:54:16

taky1973

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

2017/07/22 01:07:23

wazanaka

“ box-sizing: border-box; ”

2017/07/22 10:10:25

efcl

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

2017/07/22 16:39:38

htn_50koma

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