CSSの光と闇

CSSの光と闇
2016.02.05 STUDIO ARCANA 社内勉強会

Chapter01
CSS設計の重要性

About Contents Service RecruitLogo CONTACT
CONTACT

body #header .contact-btn {
float: right;
background-color: pink;
padding: 5px 10px;
color: #fff;
}
「CSSって簡単ですよね！」

CONTACT
Title
Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text

float: right;
padding: 5px 10px;
color: #fff;
}
#main #contents .contact-btn {
padding: 5px 10px;
color: #fff;
}
「CSSって簡単ですよね！だってコピペでいけるし」

CONTACT
Title
Text Text Text Text Text Text Text Text
BACK TOP

float: right;
padding: 5px 10px;
color: #fff;
}
#main #contents .contact-btn {
padding: 5px 10px;
color: #fff;
}
#footer .inner a.button-top {
background-color: pink; 
padding: 5px 10px;
color: #fff; 
}
「CSSって簡単ですよね！見た目がデザイン通りだったら何でもいいんでしょ？」

body #header .contact-btn {…}
#main #contents .contact-btn {…}
#footer .inner a.ghostButton {…} 
 
a.pink-button {…}
#sidebar .sideNav > a.btn-green {…}
#main .wrap .card .more-btn {…}
section .login span.loginBtn.disabled {…}
そのうちこんなコードが。。。

ボタンの仕様が変更になりました。

修正しようとしたら 
関係ない箇所が壊れる
似たような記述があって
どこをいじれば 
いいのかわからない
思った通りに 
スタイルが反映されない

!important

破綻しやすいCSSにルールを作ろう
CSSは単純に書くだけなら簡単だが 
その場しのぎのコードになりやすく管理するのが難しい。
問題を未然に防ぐため「デザイン通りにしたからいいでしょ」は卒業してCSS設計をしよう。

Chapter02
良いCSS設計のゴール

CSS Architecture
原文 http://philipwalton.com/articles/css-architecture/ 
日本語 http://article.enja.io/articles/css-architecture.html

予測しやすい
予測しやすいCSSとはルールが期待通りに振る舞うことを意味する。ルールを追加・更新したと
き、そのルールが意図せずサイトの一部に影響を与えるべきではない。滅多に変更されない小規
模なサイトであれば、このことはあまり重要ではないが、数十、数百ページの大規模なサイトで
あれば、予測しやすいCSSは必須といえる。

再利用しやすい
CSSのルールは抽象的で、十分に分離されているべきである。それはパターンとすでに解決した
問題を書きなおす必要なく、既存のパーツから新しいコンポーネントを速くつくることができる
ということだ。

保守しやすい
サイトに新しいコンポーネントと機能が追加・更新されるか、再編される必要があるとき、既存
のCSSのリファクタリングを必要とすべきではない。ページにコンポーネントXを追加するとき
に、そのわずかな存在によってコンポーネントYを壊すべきではない。

拡張しやすい
サイトが大きく、複雑に成長していくにつれて、通常はたくさんのデベロッパがメンテナンスの
ために必要となる。拡張しやすいCSSとはひとりのデベロッパか、大きなエンジニアチームか
を問わず、容易に管理できることを意味する。またそのサイトのCSSアーキテクチャに、巨大な
学習曲線を必要することなく容易に近づけるという意味でもある。あなたが今日CSSを触る唯一
のデベロッパだからといって、先々にも常にあなただけであるというわけではない。

Chapter03
破綻しやすいCSS

・HTMLの構造に依存している
・セレクタを限定している 
・詳細度によるスタイルの上書きを多用している
・スタイルを打ち消している

Contents Title
Contents の本文が入ります。

<div class="contents">
<div class="wrap">
<h2>Contents Title</h2>
<p>Contents の本文が入ります。</p>
</div>
</div>
.contents .wrap h2 {
color: pink;
border-bottom: 1px solid;
padding-bottom: 5px;
margin-bottom: 10px;
font-size: 2.4rem;
font-weight: 700;
}

Contents Title
Side Title

/* sidebarのh2にスタイルが効かない */
.contents .wrap h2 {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
<div class="wrap">
</div>
</div>
<div class="sidebar">
<h2>Side Title</h2>
</div>

.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
<div class="wrap">
<h2 class="heading">Contents Title</h2>
</div>
</div>
<h2 class="heading">Side Title</h2>
</div>

・HTMLの構造に依存している
・セレクタを限定している 
・詳細度によるスタイルの上書きを多用している
・スタイルを打ち消している

h2.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
<div class="wrap">
</div>
</div>
</div>

/* マークアップに変更があるとスタイルが効かない */ 
h2.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
<div class="wrap">
</div>
</div>
</div>

.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
.sidebar .heading {
border-bottom: none;
padding-bottom: 0;
}
<div class="wrap">
</div>
</div>
</div>

.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
.headline {
}
<div class="wrap">
<h2 class="heading headline">Contents Title</h2>
</div>
</div>
</div>

.heading {
color: pink;
font-size: 2.4rem;
font-weight: 700;
}
.headline-none {
border-bottom: none;
padding-bottom: 0;
}
<div class="wrap">
</div>
</div>
<h2 class="heading headline-none”>Side Title</h2>
</div>

CSSの基礎知識
CSSとは？

CSSの基礎知識
Cascading Style Sheet
CSSはCascading Style Sheetの略でWebサイトなどの見栄えを定義するための言語です。 
Cascadingとは「階段状の滝のような」「連鎖的に伝わる」という意味で 
ある要素に対する宣言が複数存在する場合に重要度・詳細度・宣言順を 
元に1つだけ有効にする仕組みのことです。

・重要度
・詳細度
・宣言順
CSSの基礎知識

CSSの基礎知識
「HTML文書作成者」>「ユーザ(利用者)」>「UA(ブラウザ等)の初期値」

詳細度が高い
詳細度が低い
! important
インラインスタイル
IDセレクタ
クラスセレクタ 
属性セレクタ 
擬似クラス
要素セレクタ
擬似要素
ユニバーサルセレクタ
CSSの基礎知識

0
inline
1
id
0
class
0
element
#header {…}
CSSの基礎知識

0
inline
1
id
1
class
0
element
#header .inner {…}
CSSの基礎知識

TEXT
p {
color: gray;
}
CSSの基礎知識

TEXT
p {
color: gray;
}
TEXT
p {
color: navy; /* 同じプロパティは上書き */ 
}
CSSの基礎知識

TEXT
TEXT
p {
color: white;
}
TEXT
p {
color: gray;
}
/* プロパティが被ってなければ継承 */
p {
color: navy; 
}
CSSの基礎知識

OOCSS
Object Oriented CSSの略称。 
コンポーネント化が難しいCSSにオブジェクト指向の概念を取り入れ 
パフォーマンスと再利用性を向上させた手法。
様々なCSS設計のベースになっており非常に大切な概念。 
米ヤフーのNicole Sullivan氏によって考案された。
CSS設計手法 / OOCSS

・構造と見た目の分離
・コンテナとコンテンツの分離

CSSの光と闇

More Related Content

Similar to CSSの光と闇

Recently uploaded

CSSの光と闇