#ジャジャジャンジャジャジャン第五回ベースルールをあきらめる時
ベースルールを使わない時もいくつかの条件の時にあります。
スタイルの変更に対して計画して複雑なものにしないようにするため。
##Tableの例 比較表テーブル
table {
width: 100%;
border: 1px solid #000;
border-width: 1px 0;
border-collapse: collapse;
}
td {
border: 1px solid #666;
border-width: 1px 0;
}
td:nth-child(2n) {
background-color: #EEE;
}何ヶ月か後に別のテーブルを追加する必要に迫られた。
見出しは左側に、データを右側に表示する必要がある。
ボーダーはなくなり、背景を変更しなければならない。
通常であればデフォルトスタイルを上書きする
table.info {
border-width: 0;
}
td.info {
border-width: 0;
}
td.info:nth-child(2n) {
background-color: transparent;
}
.info > tr > th {
text-align: left;
}
.info > tr > td {
text-align: right;
}###問題
問題となるのはスタイルを上書きしている理由が、ベースルールが単一の目的のためだけに存在しているからだ。
ベースルールはデフォルトスタイルを定義するために利用されるべきで、特定のモジュールで拡張するように使うべきだ。
ここで解決策はモジュールを作ればいい。
###CSSにおけるモジュール化とは モジュールとはページ内の個別のコンポーネント
table {
width: 100%;
border-collapse: collapse;
}
.comparison {
border: 1px solid #000;
border-width: 1px 0;
}
.comparison > tr > td {
border: 1px solid #666;
border-width: 1px 0;
}
.comparison > tr > td:nth-child(2n) {
background-color: #EEE;
}
.info > tr > th {
text-align: left;
}
.info > tr > td {
text-align: right;
}infoモジュールはたった2つの簡単なルールで単純化された。
もしスタイルが特定の目的を果たすためにある のであれば、モジュールを作るべきだ。
そうすることで古いコード を上書きしたり、リライトしたりする必要を避けることができる。
##アイコンの例
メニューHTML
<ul class="メニュー">
<li class="menu-inbox">受信箱</li> <li class="menu-drafts">下書き</li>
</ul>メニューCSS
.menu li {
background: url(/img/sprite.png) no-repeat 0 0;
padding-left: 20px;
}
.menu .menu-inbox {
background-position: 0 -20px;
}
.menu .menu-drafts {
background-position: 0 -40px;
}###問題
• リストアイテムという特定のHTML構造に依存する。
• ほかのモジュールで利用する際にスプライトを再度定義する必要がある。
• 要素内の配置は非常にもろい。フォントサイズを大きくするだけでもスプライトのほかのパーツが見えてしまうかもしれない。
• 横並びのスプライトしか利用できず、xのポジションは0で 固定されているため、右から左に文字が配置されるインターフェイスを実装するのが難しくなる。
これらの問題を解決するためにアイコンそのものがモジュールになるように変更する必要がある
アイコンモジュールHTML
<li><i class="ico ico-16 ico-inbox"></i> 受信箱</li>アイコンモジュールCSS
.ico {
display: inline-block;
background: url(/img/sprite.png) no-repeat;
line-height: 0;
vertical-align: bottom;
}
.ico-16 {
height: 16px;
width: 16px;
}
.ico-inbox {
background-position: 20px 20px;
}
.ico-drafts {
background-position: 20px 40px;
}##コードのフォーマット
###CSS単一行アプローチ ルールセット内のすべてのプロパティは同じ行で宣言される
.module {
display: block;
height: 200px;
width: 200px;
float: left;
position: relative;
border: 1px solid #333;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
-moz-box-shadow: 10px 10px 5px #888;
-webkit-box-shadow: 10px 10px 5px #888;
box-shadow: 10px 10px 5px #888;
font-size: 12px;
text-transform: uppercase;
}###問題
CSS3プロパティはベンダープリフィックスにあふれているので全てを1行で納めると可読性が落ちる。
この例では11のプロパティが宣言されているが、モジュールに対し てもう1つ、2つ別の機能を追加したらあと6つのプロパティの追加は あっという間だろう。
これらを1行で納めてしまおうとすると、はじ めのいくつかのプロパティはスクリーン内にあるが、残りはすべて 右にスクロールしないと見ることができない。
###複数行アプローチ
• コロンの後のスペース
• 各宣言には前に4スペース(タブではない)
• プロパティを種類でグループ化
• 開始の中括弧はルールセットと同じ行
• 色の宣言は短縮形
background-color: #6d695c;
background-image: url("/img/argyle.png");
background-image: repeating-linear-gradient(-30deg,
rgba(255,255,255,.1), rgba(255,255,255,.1) 1px,
transparent 1px, transparent 60px),
repeating-linear-gradient(30deg,
rgba(255,255,255,.1), rgba(255,255,255,.1) 1px,
transparent 1px, transparent 60px),
linear-gradient(30deg, rgba(0,0,0,.1) 25%,
transparent 25%, transparent 75%, rgba(0,0,0,.1)
75%, rgba(0,0,0,.1)),
linear-gradient(-30deg, rgba(0,0,0,.1) 25%,
transparent 25%, transparent 75%, rgba(0,0,0,.1)
75%, rgba(0,0,0,.1));
background-size: 70px 120px;###色の宣言
blackやwhiteというキーワードを使う人もいるが、私は可能な限り3つか6つで宣言できるhexを使って宣言することにしている。
¥#000や#FFFはキーワードで宣言するのよりほんの少しではあ るが短い。
###一貫性を保つ
最終的に最も大事なことは、SMACSSで説明されているように、スタ ンダードを作り、ドキュメントし、それに対して一貫性を保つことだ。
そうすることでプロジェクトが大きくなっていくごとに、自分 にとっても他者にとってもプラスに働くことが多い。
