コーディングルールについてお聞きしたいです！

コーディングルールについて。

グーグル、モジラなど色々ありますが。現場では、独自のルールを使っていますか？
色々見てみたのですが、結構疑問点もありどれが現場では正しいか迷っています？

・Media queryの記述場所は、ベースのソースの後ろが一般的だと思いますが、下記のようなやり方を推奨しているところがありました。
コーディングガイド by @mdoより

Media queryの記述場所可能な限り、media queryはそれが関係する要素の近くに記述すること。別のファイルにまとめたり、ファイルの最後にまとめたりしないこと。そうすると将来的に誰かが見落とす可能性が高くなるだけだ。
.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
.element { ...}
.element-avatar { ... }
.element-selected { ... }
}

・クラス名は、BEMなどを使っていますか？
それとも、下記のサイトのように、一般的に使われているクラス名を使うのが一番でしょうか？
http://www.css-lecture.com/log/convenience/001.html

・HTMLの属性を書く順序は下記ので問題ないでしょうか？
CSSの定義をアルファベット順にした後、HTMLの属性を書く順序についてずっと考えていた。アルファベット順だとわかりやすいが、非常に読み解きづらくなる。そういった点での読みやすさだけでなく、必須属性を書き忘れないようにもできたら良いのかなと色々考えている。
今のところ以下のような順序が良さそうだと感じている。

1. id属性
2. class属性
3. style属性
4. 他属性をアルファベット順で
5. WAI-ARIA (role属性とaria-*属性)
6. data-*属性
7. Microdata (item*属性)

id属性とclass属性を先頭にするのはCSSとの兼ね合いで、これらだけ知りたいというケースが多いからだ。使われることが多いclassが前の方が効率的だろうと思われるが、一意に確定されるidの強さを先頭にすることで表現したい。style属性を使うならclassと離して書くのは良くなさそうなのでこれらに続けて書く。できる限り使わない方が良いのは言うまでもない。
続けて普通の属性をアルファベット順で書くようにする。必須属性の位置が安定しないため、書き忘れを防げないようだが、必須かどうか自体が安定していない。そこで全体的な順序をアルファベット順に固定することで、必須属性が欠けている時に違和感が生じるように、という考えでこうした。
さらにHTML要素の振る舞いを変更または最適化することになるWAI-ARIAの属性を書いていき、最後に補完的な意味合いの強いdata-*属性とMicrodataを追加する。
条件が多すぎるので他の人が受け入れられるようなものではなさそうだ。アルファベット順、ただしclass属性だけ先頭にするという辺りが落とし所として無難に思える。

・CSSのプロパディの順番は、abcd順それとも、モジラのルールである、同じ意味合いのプロパティをまとめる形でしょうか？

プロパティの並び順
01/* Suggested order:
02 *
03 * display
04 * list-style
05 * position
06 * float
07 * clear
08 * width
09 * height
10 * margin
11 * padding
12 * border
13 * background
14 * color
15 * font
16 * text-decoration
17 * text-align
18 * vertical-align
19 * white-space
20 * other text
21 * content
22 * CSS 3
23 */
基本的にmozilla.org Base Stylesに準拠して書いています。

行動規範の内容に同意します

回答2件

まず、複数人開発でコーディング規約を導入するかしないかの2択なら、
もちろんしたほうが良いです。さすがにバラバラだと困るので。

でも、どんなコーディング規約が良いか、は一長一短だと思います。
一概にどれが正解とは言いがたい。宗教論争になりやすい分野です。

コーディング規約によって可読性が向上するというプラス面だけでなく、
その作成・学習・適用・訂正・変更コストのようなマイナス面もあります。

それをふまえた上で私が言いたいこととしては、とくに事情がないかぎり、
有名なコーディング規約のほうが、独自規約より良い場合が多いと思います。

その理由は、「車輪の再発明」の文脈で「なるべくライブラリを自作しない」のと同じで、
「なるべくコーディング規約を自作しない」ほうが良い、という感じでしょうか。

IDE（のプラグイン）やツールで、検証したり適用できるものはなお良しです。
自動化でコストが浮くので、生産性向上のメリットだけ享受できるからです。

もちろん、既存の規約に疑問があって、
細かくカスタマイズしたいから、ご質問されているのかもしれません。

しかし、グーグルでもモジラでも、BEMでもOOCSSでも、
一度決めたらそれに従うほうが、総合的に見れば生産的だと思います。

BEMにしても、ただのネーミングルールではなく、
BEMツリーのツリー構造を保つことで、開発上のメリットが生まれます。

極端な話ですが、もしそれらを足して2で割った独自規約を作ったら、
統一されてなくて使いづらい規約になるのは分かりやすいでしょう。

細かくカスタマイズしたりすると、それに近いことが起きてきます。
かりに部分的にはこのほうが良い、というのが正しくても、全体では非効率です。

まとめると、規約は統一されていることが最大のメリットなので、
支障がなければ有名な規約をそのまま使うのが理想だと考えています。
（まあ現実には、あまりに面倒くさくて、妥協することも多いですが……）

投稿2015/07/21 19:33

LLman

総合スコア5592

退会済みユーザー

2015/07/22 05:30

詳細なご回答大変ありがとうございます。独自ですと、ややこしくなるので、多少あわないものがあっても、グーグルのルールならルールと決めてしまうほうが、ややこしくならないということですね。＞ BEMにしても、ただのネーミングルールではなく、 BEMツリーのツリー構造を保つことで、開発上のメリットが生まれます。 BEMは、クラスが長くなるなど不評もありますが、それを上回るメリットがあるので、コーダーは、取り入れていくべきなのですね。現場がどれくらい取り入れているかはわかりませんが、ポートフォリオがBEMでできていれば、評価はプラスにしかならないということですね。

退会済みユーザー

2015/07/22 05:49

LLmanさんもBAにしたかったのですが、両方できずにすいませんでした。

行動規範の内容に同意します

ベストアンサー

・Media queryの記述場所

サクッと見通せる程度の分量しかないCSSならベースコードの末尾にまとめてMedia Queriesを書いてしまうこともできるでしょうが、実際の案件ではまずそのようなことは無いので、関係する記述の後に続けて記述する方が分かりやすいと思います。実体験でそう感じます。

・クラス名は、BEMなどを使っていますか？

私個人は一般的なid/class名をベースに、OOCSSやらSMACSSやらBEMやらのルールから使いやすそうなところだけつまみ食いMixしている感じです。基本的にコーディングは一人でやっており、他人とルールを合わせる必要性があまり無いので何か一つのルールでガチガチに固める必要性は今のところ感じていません。
どんなルールでも完璧なものはありませんし、案件内容や制作体制によって最適な手法も変化しますので、
ご自分の環境において最も重視するポイントを抑えた設計ルールを採用すれば良いと思います。

・HTMLの属性を書く順序は下記ので問題ないでしょうか？

すみません、そこまで深く考えてルール化しようと思ったことはないです。

・CSSのプロパディの順番は、abcd順それとも、モジラのルールである、同じ意味合いのプロパティをまとめる形でしょうか？

アルファベット順よりはモジラルールに沿った形のほうが書きやすく分かりやすいと思います。
ただ、個人的にはひとつひとつのプロパティ記述順を厳密に決めたりはせず、

１．視覚形成系（fload,position,display,overflow等）
２．ボックス系（width,height,margin,padding等）
３．ボーダー／背景（border,background）
４．文字色（color）
５．文字組み系（font-,text-,*-align等）

といった感じでざっくりグループ化する程度で、グループ内で多少順番が前後しても
あまり気にしないようにしてます。
記述順を気にしすぎるとつまらない手間ばかりかかって面倒なので。。。
どうしても順番を揃えたいなら、手書きした後で最後にツールで整形すればいいですし。
目下の悩みはCSS3のプロパティをどこに入れるかで毎回悩むところでしょうかー。。。

大人数のチームで大規模開発しなければならないような環境だと面倒でも厳密なルールを作って
それを徹底させないとあっという間にCSSは破綻してしまいそうですが、
しがないフリーのコーダーなので、基本、ゆるゆるです（苦笑）
参考までに・・・

投稿2015/07/21 18:31

aKusano

総合スコア3763

退会済みユーザー

2015/07/22 05:48

詳細なご回答大変ありがとうございます。＞・Media queryの記述場所質問の際に、記載した方法が一番よいのですね。一番下に書いてしまう現場も多いかもしれませんが、やはり、毎度直下にすべてのメディアクエリーがあったほうが、ソースが多少増えても圧倒的に管理がし易いという事ですね。＞・クラス名は、BEMなどを使っていますか？フリーランスでコーダーをされているのですね。すべてご自身でなさっているので、自由にできるのですね。うらやましいです。私もaKusanoさんのように、フリーランスのコーダーやフロントエンジニアになりたいと思っています。こちらの件も別途お話を聞かせていただけるのであれば、質問させていただきたいくらいです。やはり、最低一年は経験がないと、ポートフォリオをがんばっても、在宅フリーランスとして、下請けになるのは厳しいですよね。＞・HTMLの属性を書く順序は下記ので問題ないでしょうか？こちらは、現場でも特に必要とされていないのですね。＞・CSSのプロパディの順番は、abcd順それとも、モジラのルールである、同じ意味合いのプロパティをまとめる形でしょうか？ざっくりグループ化する程度が、仰る通り妥協点かと思います。完全に順序をあわすのは、毎度確認が必要で時間がかかりすぎますので、現場もそれくらいでしょうね。