質問: HTML,CSSコーディングの初心者です。 非コーダーのデザイナーでしたが、勉強を始めています。 見られればいい、という程度のコーディングはできるのですが、 運用視点をもった「CSS設計」をした経験が全くないため、ステップアップしたいと思っています。 「CSS設計の教科書」という本を読み、BEMやFLOCSSなど様々な設計手法を知りましたが、 ぼんやり概念は理解できても、「で?どうすりゃいいんだ?」という感じ。 具体的な練習パートがないため、個人で試して見ても合ってるのかもわからなくて 実用イメージや練習方法が浮かびません(白目) 「あなたのPJに合わせて最適な方法を選ぼう」となってますが、 どんな状況において、何が最適なのかもさっぱりで、立ち往生しています・・・(絶望) そこで、CSS設計の思想をつける上で皆さまが実践された 1練習方法 2参考文献や、URL など、ありましたらぜひ教えていただきたいです。 当社古い会社で、先輩もあまり最新の知識に明るくなく、 事業会社なので頻繁に試せる機会がないので個人で勉強しようと思っています。 ひとまず、FLOCSSに則って何か作ってみようかと思っています。。。
回答: CSS設計は、BEMやFLOCSSなどのメジャーなCSS設計手法+自分がコードを書いていてこうしたほうが楽だな便利だな と思ったものを付け足していく といった感じかなと思います。 現在自分はSMACSSをベースにbootstrapを取り入れつつ、随時カスタマイズしています。 基本的に、「使い回しができること」、「使い回しができる複数のスタイルを組み合わせて更になにかを作れること」の2点を考えながら作っています。 なので1の勉強方法については、上記2点を考えながら、自分が今選択しているCSS設計手法から外れていないか時々本や参考サイトで確認しつつ、たくさんコードを書くことでしょうか。 とくにページ数が多いと良いと思います。 ある程度コードを書いていくとCSS設計手法が、どうしてこういうやり方をしているのかわかってくると思います。 また、「こうしたら楽かな?」「これ似てるのにわざわざ書くのめんどくさいな」という思いが出てくると思いますので、それを解決していく感じです。 2参考文献や、URL SMACSSを勉強する際に先輩に渡された本はEbrickさんと同じです。 参考にしたサイトは↓のサイトなどです(SMACSS) https://app.codegrid.net/entry/smacss-1