Vol.2 html,css コーティングの時の決め毎

何かこれから作っていこうと考えています。

まず、何を作るのか、作るためにどんな技術が必要なのかすらなかなか理解しきれていないので
まずはそこから始めていきます。

今回は、コーディングをしていく前に、自分なりのコーディングする際の決まりを今回まとめて
おきたいと思います。 まだコーディングの実力は未熟な上に、経験もまだ浅いですが書いておいて都度
追加、修正していきます。

oocss, smacss, bem

すべてを取り入れるのではなく、自分が使えそうなところを使います。

Layoutの決め方

Layoutは、ヘッダー、フッター、サイドバー、メインコンテンツなど
大きな構成要素をいいますが、自分はもう少し細かいブロックもLayoutの仲間と見て、
接頭辞として.l-をつけます。

moduleの決め方

自分は、bemのElementを、smacssでいうところのmoduleと見ています。
moduleは、接頭辞として「.mod-」をつけます。

.lがついたLayout要素の中にmoduleをいれていくイメージです。

<div class="l-layout">
    <div class="moduleA"></div>
    <div class="moduleB"></div>
    <div class="moduleC"></div>
</div>

moduleを基準にモジュール名を決めていく

module1があった場合、スタイルは基本的にmodule1を出発点に書きます。
モジュールの名前さえかぶらなければスタイルの競合、汚染のを減らすことが出来ます。

<div class="mod-module1">
    <h1 class="mod-block1-title">タイトル</h1>
    <p class="mod-block1-text">テキスト</p>
</div>

少しbemの考え方を使って自分用にアレンジしました。

大きめのモジュールをbemでいうところのblockとして大枠とします。
そのなかに、いくつか要素があると思いますが、大きめのモジュールの中の要素を blockかelementかに分けます。

大きめの枠をmod-module1とします。
Block1とElement1で構成しているとします。
Block1は、さらにelement2を構成しています。

block1を、mod-block1とします。
element1を、mod-module1-element1とします

そして、Block1が構成する要素をmod-block1-mod-element2とします。
blockとelementをハイフンでつないでいくイメージです。

スタイルのためにID属性をつかわない。

IDを使ったスタイルは継承度などの問題などで複雑になってしまうので、できるだけ
使わないようにします。JavascriptのためのID属性は積極的に使っていきます。

!important

基本的に使いませんが、smacssのstateカテゴリーなどどうしても詳細度の関係で
適応できないときは使用することにします。 a

CSSメタ言語

cssを書くときは、出来るだけSass(Compass)を使用する。CSSで再現できる自由度が広がるためです。

スタイルを当てるときは、入れ子を3つくらいまでにする

3つ以上になってくると可読性が保てないとので、出来るだけ必要ないネストは
含めず、短くするようにしていきます。

wrapper fruit apple {

    }

cssプロパティはアルファベット順で書く

バラバラより統一されていたほうが見やすいと思うので、
アルファベット順にします。

アルファベットには、sublime textのF9コマンドでしています。

入れ子になったものは出来るだけインデントを入れる。

インデントを入れるか迷っていましたが入れた方が見やすいと思うので、
適度にいれるようにします。

汎用クラス

基本的には使用しませんが、どうしても必要なとき、
例えば、marginを一部だけ当てたいときなどに使用します。