W3QはBiztterに生まれ変わりました!
Web制作に関するお悩みはBiztterへどうぞ!

Biztterで質問する

ID:8CPwJL さんの質問

保守性、拡張性の高いCSSの設計をするためには、どうすれば良いのですか?
.
cssの基礎は勉強してかけるようにはなってるのですが、コーディングしていくうちに次第に、なんか汚いなと感じて書き直したくなる衝動に駆られてしまいます。
.
BEMの本は読んだのですが何をブロックにするかの基準もわかってません。また、BEMからcssの設計デビューしたので、従来のマルチクラスでのコーディング方法も理解していません。sassも使い始めたのですが、これにはextend機能があって、プログラミングの継承が使えるので、取り入れると綺麗なcssの設計が出来そうな気はしています。
.
しかし、何が現時点でのベストプラクティスなのか分かりません。本業でされてる方、cssの良い設計のコツや方法、考え方など教えて下さい!
.
コーディングは単調な作業の割になんだかんだで時間がかかるので、上手く書けないと自分の場合、ストレスが溜まって気が滅入ってしまいます。ちなみにトピ主はコーディングよりもプログラミングの方が趣味の延長ですが経験長いです。

みんなの回答 3 件

ID:9HDmXo さんの回答

「綺麗な設計」の定義が不明確だし、この文章↑も改行してないから読みにくい。

ID:8CPwJL

改行はこのサイトでは出来ないですよね?改行タグ除去されるみたいですし。

ID:8CPwJL

綺麗な設計の定義は、保守性、拡張性の高いcssということでお願いします。

ID:8CPwJL

.で擬似的に改行しました。

ID:6ylD28 さんの回答

これ参考になりましたよ。
メンテナブルCSS
ttps://www.cyberagent.co.jp/techinfo/techreport/report/id=7926

キレイに書くには、ガイドラインを設けることだと思います。

ID:8CPwJL

ありがとうございます。早速読んでみます。

ID:CcZr.O

ありがとうございます。参考になりました

ID:978Tij さんの回答

CSS設計の方法としてはSMACSSやOOCSSが有名です。どちらがいいとかではなく、べたーな設計手法を知ってから、自分のプロジェクトに合う部分を取り入れていくことになるかと思います。
Web上でも結構情報がありますが、書籍としてまとまったものが欲しいなら「Web制作者のためのCSS設計の教科書」というのがわりとまとまってます

すぐできるのは、部品、コンポーネントごとにsassファイルを分けちゃって、ベースファイルからインポートしちゃうことじゃないですかね。
けっこうわかりやすくなるかと。

cssも他のプログラミング同様、モジュール化していこうという風潮のようで、参考リンクのやつはwebpackを使ったわりと最新なものかと思います。

qiita [意訳]グローバルCSSの終焉

http://qiita.com/chuck0523/items/9a3cc6a2190dfb71a684
ID:gQvpnB

参考リンクの手法はCSSにとって新しいし、すごい興奮する。

最終更新日:2016-02-17 (950 views)

関連するトピックス

ページ上部に戻る