ID:8CPwJL96WLCr さんの質問

895 views

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

登録日:2016-02-17 · カテゴリー:一般

みんなの回答 3 件

2016-02-17 · ID:9HDmXomniIU9 報告

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

2016-02-17 · トピ主 報告

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

2016-02-17 · トピ主 報告

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

2016-02-17 · トピ主 報告

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

2016-02-17 · ID:6ylD28ylyJ7C 報告

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

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

2016-02-17 · トピ主 報告

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

2016-02-17 · ID:CcZr.O4lkjgN 報告

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

2016-02-17 · ID:978TijmalE.Z 報告

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

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

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

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

http://qiita.com/chuck0523/items/9a3cc6a2190dfb71a684
2016-02-17 · ID:gQvpnBKLyj/L 報告

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

回答の受付は終了しました。

関連トピック