HTML・CSSのコーディングで、「だれもがわかりやすい」、「メンテナンスがしやすい」、「キレイ」を目標に作るときどういったルールでやればいいのでしょうか?
自分はとりあえずブラウザでみれればいいやというタイプでとにかくコードが汚く、長くなってしまいます。
もしみなさんがこれをルールにコーディングしているやこすればいいというものがあったら教えていただけるとうれしいです。
気になる質問をクリップする
クリップした質問は、後からいつでもMYページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
回答5件
0
ベストアンサー
「だれもがわかりやすい」
・CSSの仕様をちゃんと理解して書く
・プロパティの継承・上書きの仕組みをうまく活用し、無駄のないプロパティ指定をする
・セレクタの種類や詳細度などの優先順位の仕組みを理解し、適切なセレクタを作る
・セレクタの命名規則を一貫性・法則性のあるものに統一する(オリジナルの命名規則でも、BEMやSMACSSのような広く浸透している命名規則でも何でもいい)
・CSSルールを適切に分類し、わかりやすいコメントを適宜記述しておく
「メンテナンスがしやすい」
・OOCSS(オブジェクト指向CSS)の考え方を取り入れ、できるだけコンポーネント化する
・詳細度が高く、後から上書きしづらいidセレクタは原則スタイル指定には利用しない
・HTML構造が変動する可能性のあるところにタイプセレクタでのスタイル指定をしない
・可能であればsassなどのプリプロセッサを導入し、機能別・ページ別に分割されたパーシャルファイルで作業をする
「キレイ」
・内容的な美しさは、CSSの仕様を正しく理解できれば自然とある程度担保できるようになる
・プロパティの記述順、インデントの有無等といったデータ整形はツールで処理するのが吉
一般的に言えることだとこんな感じでしょうか。
ただ、「誰が」「何のために」「どんなものを」運用していくのか、というのは案件によって様々なので、
最終的にどうすればその案件にとってよりベターなものになるのかは本当にケースバイケースです。
何十人もの人が同時にあれこれ作業する、大規模サイトの運用ルールと、
1人で全体を把握できる程度の小規模サイトに求められるものが同じわけはないですし、
規模が同じでもデザインやコンテンツの特性によってどのような設計にしておけばメンテナンス性が高まるのかはまちまちです。
・メンバーのスキル/知識レベル
・運用しているサイトの特性
・制作環境、運用体制
などを総合的に考慮して、何を重視するのか自分で判断することが求められるかと思いますね。
--追記
上記は全部CSSの話です。
HTMLの方は
・文法・仕様をちゃんと守る
・入れ子になるところのインデントを揃える
・ブロック単位など最低限のコメントを入れる
くらい出来ていれば大体OKだと思います。
投稿2016/11/07 11:03
編集2016/11/07 11:06総合スコア3763
0
https://syncer.jp/html-prettyprint
こういったツールが色々ありますので、公開前や納品前に統一されてみてはいかがでしょうか。
「好み」で片付けられても困りますものね。
投稿2016/11/07 08:05
総合スコア686
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
- 誰もが分かりやすい
コードを書く前に全体の仕様を書くことです.
オブジェクト指向言語などではUMLというの用いてシステムの流れや内部モジュールの相関関係をあらかじめ決めておくことで多人数で開発しています(団体により異なりますが).
- メンテナンス
1ができていれば大丈夫でしょう.
コードを書く際コメントをaddする癖をつけておくと各モジュールの手直しがしやすいです.
- キレイ
まず紙とペンで書いてみましょう!(←あくまで個人的な意見です)
paddingやmerginは視覚化することで設計しやすくなりますよ.
デザインの部分は個々のセンスです.
webや書店で「美しいUI」や「見やすいデザイン」をキーワードに探すことから始めてみてください.
アフィリエイトブロガーのHPなどは意外にも参考になりますよ.
投稿2016/11/12 04:35
総合スコア25
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
0
趣味でプログラミングしています。
私は「インデント」を使って書くですね。
たとえば、
JavaScript
1function test(){ 2var abc = 100; 3}
と書くよりも、
JavaScript
1function test(){ 2 var abc = 100; 3}
の方が見やすいですよね。
私の場合は、関数名や、for文の条件文 のところから開始していることが多いです。
例:
JavaScript
1function test(){ 2 for( i = 0; i < 10; i++ ){ 3 document.write( "test" + i ); 4 } 5}
後は、変数名や関数名、オブジェクト名... は 機能や用途 から名前をつけます。
例:
ファイルの入出力 (クラス) -> Input and Output for FILE -> IOFile
そういう風に決まりを定義してそれに沿っていけば(比較的)綺麗なソースコードになると思います。
投稿2016/11/08 02:26
総合スコア4958
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
あなたの回答
tips
太字
斜体
打ち消し線
見出し
引用テキストの挿入
コードの挿入
リンクの挿入
リストの挿入
番号リストの挿入
表の挿入
水平線の挿入
プレビュー
質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。