目的と目次
複数で案件を制作する場合品質を揃えるため、また会社内で引き継ぎを行う場合、ルールを決めていると作業時に混乱が少なくなります。
現在の作成時のルールを交えながらこんなルールで行っているよ。
こんなルールでやるといいかもという記事をまとめます。
・ディレクトリ構成
・HTMLとCSSの書き分け
・クラス名、ID名の指定
ディレクトリ構成
フォルダ内のファイルの収納箇所を統一しておくことで引き継ぎを行ったあとでも亜る程度のフォルダ内になにが収納されているかが予想できて作業の速度をファイルを探すことで落とすことがなくなります。
現在、制作を行う中での基本的なディレクトリ構成は下図のような感じです。
html以外は[assets]フォルダに収納するようにしています。
ちなみに
初めてHP制作の会社で働いていた時は下図のような感じでした。
そのほかには下図のような感じ、
commmon[共通]ではない場合はどうしようという疑問もありましたがこういうディレクトリ構成の時もありました。
[assets]フォルダってなんだろう？
Googleで検索するとAndroidのアプリ開発の記事が引っかかりました。
[android] rawとassetsの使い分け
鈍足ランナーのＩＴ日記
↑[assets 意味]で検索した時に鈍足ライナーさんの記事が上位に来ました。皆さん気になっているみたいですね。
まだまだ調べたりないとは思いますが現在のディレクトリ構成になったのは、アプリ・システム開発も行なっているからだろうと思います。
HTMLとCSSの書き分け
HTMLにCSSを直書きできるけどHTMLとCSSを分けて書く目的ってなんですか？
引き継ぎや人に教えている時によく聞かれた質問です。
【HTMLにCSSを直書きすることでのメリット】
・CSSファイルを作成せずにhtmlのレイアウトができる
・ページ数が少ない時にはほかページと共通で利用する必要がないので直書きしてもあまり問題ない。
・比較的早く制作ができる？（これはすこし疑問、、）
【HTMLにCSSを直書きすることでのデメリット】
・ソース量が増える。
・複数のページ数があるサイトを作成する時メンテナンスが困難
・見栄えが悪い
そのほか参考サイト
CSS直書きのメリット・デメリット
CSSの使い方の区分けについて教えてください
ほか記事では
具体的な内容（Contents）と文書の構造（Structure）はHTMLに、見せ方（Presentation）はCSSに、振る舞い（Behavir）はJavascriptに、それぞれ別ファイルとして分離する。
といった基本方針を持ったところもあります。
この言葉一番わかりやすく説明できる一文だなと思って文章にリンクを貼りました。
現在の私の制作現場でもHTMLへCSSの直書きは引き継ぎを行う上で不効率のため極力しないよう努めています。
クラス名、ID名の指定
昔のクラス名の指定の書き方は特に意識をしていなかったので
<div class="ma-10">
<p class="p-01">これはテストです。</p>
<p class="p02">これはテスト２です。</p>
</div>
といった具合に書いていました。
他人がこれを見た時、pダグのクラスにはどんな指定が書かれているのかパッとみわかりません。
クラスの指定にはある程度の目的がわかる名前をつけると自分でも制作をする上で整理できたりします。
目的がわかるクラス名って何？と思うかもしれません。
私にもわかりません。とりあえずclass="p-01"といったクラス名はやめましょう。
html/cssの命名規則（BEM）というのがあります。
一回記事を読むとなんとなくわかります。
少し細かいBEMい話
それ以外にも大手企業の規約をリンクしておきます。