保守性、拡張性の高いCSSの設計をするためには、どうすれば良いのですか?
.
cssの基礎は勉強してかけるようにはなってるのですが、コーディングしていくうちに次第に、なんか汚いなと感じて書き直したくなる衝動に駆られてしまいます。
.
BEMの本は読んだのですが何をブロックにするかの基準もわかってません。また、BEMからcssの設計デビューしたので、従来のマルチクラスでのコーディング方法も理解していません。sassも使い始めたのですが、これにはextend機能があって、プログラミングの継承が使えるので、取り入れると綺麗なcssの設計が出来そうな気はしています。
.
しかし、何が現時点でのベストプラクティスなのか分かりません。本業でされてる方、cssの良い設計のコツや方法、考え方など教えて下さい!
.
コーディングは単調な作業の割になんだかんだで時間がかかるので、上手く書けないと自分の場合、ストレスが溜まって気が滅入ってしまいます。ちなみにトピ主はコーディングよりもプログラミングの方が趣味の延長ですが経験長いです。
みんなの回答 3 件
「綺麗な設計」の定義が不明確だし、この文章↑も改行してないから読みにくい。
これ参考になりましたよ。
メンテナブルCSS
ttps://www.cyberagent.co.jp/techinfo/techreport/report/id=7926
キレイに書くには、ガイドラインを設けることだと思います。
CSS設計の方法としてはSMACSSやOOCSSが有名です。どちらがいいとかではなく、べたーな設計手法を知ってから、自分のプロジェクトに合う部分を取り入れていくことになるかと思います。
Web上でも結構情報がありますが、書籍としてまとまったものが欲しいなら「Web制作者のためのCSS設計の教科書」というのがわりとまとまってます
すぐできるのは、部品、コンポーネントごとにsassファイルを分けちゃって、ベースファイルからインポートしちゃうことじゃないですかね。
けっこうわかりやすくなるかと。
cssも他のプログラミング同様、モジュール化していこうという風潮のようで、参考リンクのやつはwebpackを使ったわりと最新なものかと思います。
qiita [意訳]グローバルCSSの終焉
http://qiita.com/chuck0523/items/9a3cc6a2190dfb71a684関連するトピックス