今までの大学生活の中で多くの本や記事を読んだり、web制作会社で働いたりした経験から初心者こそ知ってほしい原則や考え方を書きました。

Format

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="ここにこのページの説明を書く">
    <link rel="icon" type="image/png" href="images/">
    <link rel="stylesheet" href="css/sanitize.css">
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <title></title>
  </head>
  <body>
    <header></header>
    <main></main>
    <footer>
      <p><small lang="en"></small></p>
    </footer>
  <script src="js/script.js"></script>
  </body>
</html>

css/style.css

@charset "UTF-8";
*{
    margin: 0;
    padding: 0;
}

/* 共通部分 */

html {
    font-size: 62.5%;
}
body{
    margin: 0 auto;
    font-size: 1.6rem;
    font-family: "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
    line-height: 1.7;
    color: #432;
}
.wrapper{
    max-width: 1024px;
    margin: 0 auto;
    padding: 0 4%;
}
*, *::before, *::after {
    box-sizing: border-box;
}
a {
    text-decoration: none;
}
li{
    list-style-type: none;
}
img {
    max-width: 100%;
    height: auto;
}


::selection {

}

htmlファイルと　cssファイルについてのみ言及します。

htmlファイルでは予め言語設定やメディアクエリ設定、cssファイルやjsファイルとの連携を行っておきます。また人によってはこれに加えてfontawesomeの設定などを挿入しておくと良いでしょう。bodyタグの中身についてはwebページの中は大まかにheader,main,footerで大きく分けて書かれるため自分がコーディングしやすくなるようにに予め書いておきます。

cssファイルについてはセレクタに対して共通のレイアウト指定をしておきます。これについては個人の考え方やチームの方針によって変わると思うので編集してください。
reset.cssやsanitize.cssを用いることでこういった指定をする必要がない場合もあります。

HTML,CSSを書くときに気をつけていること

ここでは私がコーディングをするときに決めている原則や決まりごとについて書きます。

!importantはプラグインで余計なスタイルが指定されている場合などを除いて極力使わない
style属性は使わない
IDに対してCSSを書かない
要素セレクタに対してCSSを書かない
共通部分を抜き出し、1つににしていくことでスタイルを再利用しやすくする
予め統一するもの(配色、フォントファミリー、フォントサイズ、絶対値の余白、アニメーションのイージング、コンテナの最大幅、各パーツのデフォルトサイズ）を決めておく
セレクタ名の後ろにスペースを1ついれる
値が0以下の少数の場合は0を省略する(0.3s → .3s)
値が0の場合は単位は省略する(0px → 0)
色はカラーコードで指定する
カラーコードは省略可能なら3桁で指定する
z-indexは10,100のように桁違いで指定する
class名は短くしようとついつい略語と使いたくなるが、誰が見ても意味がわかるようにclass名は極力省略しないようyにする
marginの向きは片方向に統一する(僕はtop,left派)
transitionのall指定は避ける→面倒くさくてもプロパティ名で指定しよう(all→colorにするとか)
wrapperなどにmax-widthとmargin:aotu;を指定して、それより外の要素は画面いっぱいに広がるようにする
widthやheightの絶対値指定は本当に必要な要素のみに指定する。大抵の場合はmarginやpaddingで解決できることが多い。
HTMLを書くときはdivとspanを一切使わないセマンティックなコードを書いて、デフォルトのスタイルのみで意味が通じるかを確認し、CSSでレイアウトをしていくときにdivとspanを解禁する。

だらだらと気をつけていることを書いたが、自分が無意識のうちに原則にしていることや決めていることが本当はもっとあると思う。
実は以上のようなことを守るかどうかなんてどうでもいい。

結局大切なことはチームで共通の書き方を認識しあっておくということだ。メンバーの中には変なこだわりを持ったメンバーもいたり、全くこだわりがなく様々な指定の仕方をしてしまうメンバーもいたりするかもしれない。そんな中でも本当に生産的なことに各メンバーが時間をかけられるように、誰が見てもわかり、誰が見ても編集しやすい、保守性、可用性、可読性の高いコードを書けるようになるとより良い。
あなたが今書いているコードが後に誰かが解読に苦しむコードにならないために。