質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.47%

  • HTML5

    4177questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

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

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 721
退会済みユーザー

退会済みユーザー

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


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


・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に準拠して書いています。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

+2

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

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

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


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

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

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


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

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

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


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

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/22 14:30

    詳細なご回答大変ありがとうございます。


    独自ですと、ややこしくなるので、多少あわないものがあっても、グーグルのルールならルールと決めてしまうほうが、
    ややこしくならないということですね。



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


    BEMは、クラスが長くなるなど不評もありますが、それを上回るメリットがあるので、
    コーダーは、取り入れていくべきなのですね。
    現場がどれくらい取り入れているかはわかりませんが、ポートフォリオがBEMでできていれば、評価はプラスにしかならないということですね。

    キャンセル

  • 2015/07/22 14:49

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

    キャンセル

checkベストアンサー

0

・Media queryの記述場所

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

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

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

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

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


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

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

1.視覚形成系(fload,position,display,overflow等)
2.ボックス系(width,height,margin,padding等)
3.ボーダー/背景(border,background)
4.文字色(color)
5.文字組み系(font-*,text-*,*-align等)

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

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

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2015/07/22 14:48

    詳細なご回答大変ありがとうございます。




    ・Media queryの記述場所

    質問の際に、記載した方法が一番よいのですね。
    一番下に書いてしまう現場も多いかもしれませんが、やはり、毎度直下にすべてのメディアクエリーがあったほうが、
    ソースが多少増えても圧倒的に管理がし易いという事ですね。




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

    フリーランスでコーダーをされているのですね。
    すべてご自身でなさっているので、自由にできるのですね。うらやましいです。
    私もaKusanoさんのように、フリーランスのコーダーやフロントエンジニアになりたいと思っています。
    こちらの件も別途お話を聞かせていただけるのであれば、質問させていただきたいくらいです。

    やはり、最低一年は経験がないと、ポートフォリオをがんばっても、在宅フリーランスとして、下請けになるのは厳しいですよね。




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

    こちらは、現場でも特に必要とされていないのですね。




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

    ざっくりグループ化する程度が、仰る通り妥協点かと思います。
    完全に順序をあわすのは、毎度確認が必要で時間がかかりすぎますので、現場もそれくらいでしょうね。

    キャンセル

  • 2015/07/22 18:20

    フリーになるには技術、納期管理、交渉力、そして何より仕事に繋がる人脈の確保がとても重要です。あと数ヶ月収入がなくても安心な額の貯金があるとかなり精神的に余裕がでますね(笑)

    質問が出ればお答えしますよー(笑)

    キャンセル

  • 2015/07/23 02:21

    ありがとうございます。
    仰る通りだと思います。また、質問させていただく事もあるかと思いますので、いつも恐縮ですが、よろしくお願いいたします。

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.47%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る

  • HTML5

    4177questions

    HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。