メンテナブルCSS

概要 メンテナブルなCSSを目指し、定義された一般的なCSSルールの紹介と、それらのルールを適用するにあたって活用できるツールを報告します。 1. 序論 CSSは記述ルールが簡素であり、少しの学習コストですぐに記述ができる手軽なツールです。 しかし、大規模なアプリケーションで複数人で開発するケース等では、見栄えだけしか考えずに身勝手にコーディングしてしまうと、 非常にメンテナンスコストがかかる負の遺産が作られてしまいます。 そのためCSSの品質を保つために様々なプロジェクトで、CSSの定義ルールが決められています。 本稿では一般的なCSSの定義ルールと、そのルールがなぜ作られたのかを合せて報告致します。 また、CSSのルールを適用するにあたって、手動・目視でルールの適用をチェックするのは非常にコストが高い作業です。 これらルールの適用を補助するツール群を、合せて報告致します。

[ybc]

メンテナブルなのにルールの優先順位が ファイルサイズ > 可読性 となっているのが気になる。

[trashtoy]

異議あり！「ファイルサイズ節約のため」とかあるけど、それよりHTTPリクエストの回数やJavascriptの処理のほうがよほどボトルネックだと思います！ていうかサイズ削減を優先するのは「メンテナブル」じゃない気が。

[bitgleams]

「なぜこのルールがあるの？」がいい。

[sisya]

「あまりに長い名前を避ける」というならわかるが、「わかる範囲で省略」というルールは理解できない。例文にある「#nav」も、navigationの略は「navi」であり、ここですでに人によって略し方の違う問題が発生している。

[hirose504]

CAのメンテルール、何故も併記してあって素敵

[ywv]

主義主張の違いのレベルで違和感を感じる所はあるけど、指標として同僚と共有するのはアリかも。

[muchonov]

この「悪い例」「良い例」「なぜ？」の見せ方はとても優れてる！／状態系クラスにis-xxxxとつけるのは、判定系関数ぽくていい。id不使用＆タイプセレクタ不使用は優先順位をきちんと構造化できてないと即死感。

[ysk_lucky-star]

たぶん「メンテナブルを目指すの中でどれだけファイルサイズを節約できるか」が主題かな。まあでも、CSSメタ言語使うならある程度コンパイル時にやってくれるはず

[aoasagi]

これ隣の席の人に読んでいただきたい

[k-holy]

"IDセレクタは使わない"でお願いします。特にカスケーディング理解してない人ほどIDセレクタ使いたがってほんと困るんで…

[teru-7]

ルール

[the_zombis]

参考になりそう

[mfreeman59]

“メンテ”

[eriko315]

メンテナンスしやすいCSSの書き方

[tihata]

めも

[ham007]

css定義のガイドラインの日本語資料

[kool_kreate]

規約

[yo-11-06]

こうゆうルール決めてると作りやすくて確かにいいよね～

[criticabug]

参考にはするけど。状態を表すの is に絞ると日本人は .is-have とか迷走しそう。

[arikui]

[]

[tyage]

メンテナブルなのにファイルサイズ節約が多いような

[farako]

変数全部グローバルにしたら便利みたいな方向性を感じる。それは本当に可読性高いのか。

[oki448jp]

メンテナブルCSS／コーディングガイドラインの参考に

[urarai]

仕事でなければこんなに厳密にしなくてもいいだろうけど、散漫なCSSは後で自分で見返したときに自分が泣くのでわかりやすいソースを書けるように努力したい。

[oinume]

「なぜこのルールがあるの？」はすごくいいけど、ファイルサイズ気にし過ぎでは？下手にクラス名省略させて可読性を下げるより、gzip圧縮に任せた方がいい気がする。

[nilab]

メンテナブルCSS | 株式会社サイバーエージェント

[sugarshin]

via はてなブックマーク - 新着エントリー http://b.hatena.ne.jp/entrylist?sort=hot&threshold=500

[adsty]

メンテナブルなCSSを目指したルールやツール。

[perezvon]

「CSSルールを守ってメンテナブルCSSを守りつつ、作業コストを削減するためにツールを活用する。」

[o_hiroyuki]

コーディング規約

[kukita]

【コーディング規約】仕事でこのような規約を作ることがよくあるが「なぜ？」の部分はおろそかにしがちなので見習いたい。また、この類のドキュメントをオープンにするCAさんの社風も素晴らしい。 #コーディング規約

[asagi_c]

あとでちゃんと読む

[h5y1m141]

なぜこのルールがあるのかっていう理由がしっかり明記されているガイドラインっていいなぁ。こういうのはマニュアル作成などでも、考え方が応用できそうな気がする

[t-shimura]

コーディング規約作成中なので、参考

[mtmt101jp]

必要必要

[yhakusyaku]

メンテナブルCSS | 株式会社サイバーエージェント :

[b-koba5525]

css参考

[csouls]

開発の指標を作ることは良い。議論の土台にもなって、組織として継続的に成長できる