Movatterモバイル変換

[0]ホーム
URL:

SM
Uploaded byShuma Mizuno
PDF, PPTX1,650 views

CSSの光と闇

2016.02.05STUDIO ARCANA 社内勉強会で使用したスライドです。

Embed presentation

Download as PDF, PPTX
CSSの光と闇2016.02.05 STUDIO ARCANA 社内勉強会
Chapter01CSS設計の重要性
CSS設計の重要性About Contents Service RecruitLogo CONTACTCONTACT
body #header .contact-btn {float: right;background-color: pink;padding: 5px 10px;color: #fff;}「CSSって簡単ですよね！」CSS設計の重要性
About Contents Service RecruitLogo CONTACTCONTACTTitleText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text TextCSS設計の重要性
body #header .contact-btn {float: right;background-color: pink;padding: 5px 10px;color: #fff;}#main #contents .contact-btn {background-color: pink;padding: 5px 10px;color: #fff;}「CSSって簡単ですよね！だってコピペでいけるし」CSS設計の重要性
About Contents Service RecruitLogo CONTACTCONTACTTitleText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text Text Text Text Text TextText Text Text Text Text Text Text TextBACK TOPCSS設計の重要性
body #header .contact-btn {float: right;background-color: pink;padding: 5px 10px;color: #fff;}#main #contents .contact-btn {background-color: pink;padding: 5px 10px;color: #fff;}#footer .inner a.button-top {background-color: pink;
padding: 5px 10px;color: #fff;
}「CSSって簡単ですよね！見た目がデザイン通りだったら何でもいいんでしょ？」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 {…}そのうちこんなコードが。。。CSS設計の重要性
ボタンの仕様が変更になりました。CSS設計の重要性
修正しようとしたら
関係ない箇所が壊れる似たような記述があってどこをいじれば
いいのかわからない思った通りに
スタイルが反映されないCSS設計の重要性
!importantCSS設計の重要性
破綻しやすいCSSにルールを作ろう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設計のゴール
再利用しやすいCSSのルールは抽象的で、十分に分離されているべきである。それはパターンとすでに解決した問題を書きなおす必要なく、既存のパーツから新しいコンポーネントを速くつくることができるということだ。良いCSS設計のゴール
保守しやすいサイトに新しいコンポーネントと機能が追加・更新されるか、再編される必要があるとき、既存のCSSのリファクタリングを必要とすべきではない。ページにコンポーネントXを追加するときに、そのわずかな存在によってコンポーネントYを壊すべきではない。良いCSS設計のゴール
拡張しやすいサイトが大きく、複雑に成長していくにつれて、通常はたくさんのデベロッパがメンテナンスのために必要となる。 拡張しやすいCSSとはひとりのデベロッパか、大きなエンジニアチームかを問わず、容易に管理できることを意味する。またそのサイトのCSSアーキテクチャに、巨大な学習曲線を必要することなく容易に近づけるという意味でもある。あなたが今日CSSを触る唯一のデベロッパだからといって、先々にも常にあなただけであるというわけではない。良いCSS設計のゴール
Chapter03破綻しやすいCSS
破綻しやすいCSS・HTMLの構造に依存している・セレクタを限定している
・詳細度によるスタイルの上書きを多用している・スタイルを打ち消している
破綻しやすいCSS・HTMLの構造に依存している・セレクタを限定している
・詳細度によるスタイルの上書きを多用している・スタイルを打ち消している
Contents TitleContents の本文が入ります。破綻しやすいCSS
<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;}破綻しやすいCSS
Contents TitleContents の本文が入ります。Side Title破綻しやすいCSS
/* sidebarのh2にスタイルが効かない */.contents .wrap h2 {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h2>Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2>Side Title</h2></div>破綻しやすいCSS
.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
・HTMLの構造に依存している・セレクタを限定している
・詳細度によるスタイルの上書きを多用している・スタイルを打ち消している破綻しやすいCSS
Contents TitleContents の本文が入ります。破綻しやすいCSS
h2.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
/* マークアップに変更があるとスタイルが効かない */
h2.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h3 class="heading">Contents Title</h3><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h3 class="heading">Side Title</h3></div>破綻しやすいCSS
.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
・HTMLの構造に依存している・セレクタを限定している
・詳細度によるスタイルの上書きを多用している・スタイルを打ち消している破綻しやすいCSS
Contents TitleContents の本文が入ります。Side Title破綻しやすいCSS
.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}.sidebar .heading {border-bottom: none;padding-bottom: 0;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
.heading {color: pink;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}.headline {padding-bottom: 5px;border-bottom: 1px solid;}<div class="contents"><div class="wrap"><h2 class="heading headline">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
・HTMLの構造に依存している・セレクタを限定している
・詳細度によるスタイルの上書きを多用している・スタイルを打ち消している破綻しやすいCSS
Contents TitleContents の本文が入ります。Side Title破綻しやすいCSS
.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}.headline-none {border-bottom: none;padding-bottom: 0;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading headline-none”>Side Title</h2></div>破綻しやすいCSS
.heading {color: pink;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}.headline {padding-bottom: 5px;border-bottom: 1px solid;}<div class="contents"><div class="wrap"><h2 class="heading headline">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>破綻しやすいCSS
CSSの基礎知識Chapter04
CSSの基礎知識CSSとは？
CSSの基礎知識Cascading Style SheetCSSはCascading Style Sheetの略でWebサイトなどの見栄えを定義するための言語です。
Cascadingとは「階段状の滝のような」「連鎖的に伝わる」という意味で
ある要素に対する宣言が複数存在する場合に重要度・詳細度・宣言順を
元に1つだけ有効にする仕組みのことです。
・重要度・詳細度・宣言順CSSの基礎知識
・重要度・詳細度・宣言順CSSの基礎知識
CSSの基礎知識「HTML文書作成者」>「ユーザ(利用者)」>「UA(ブラウザ等)の初期値」
・重要度・詳細度・宣言順CSSの基礎知識
詳細度が高い詳細度が低い! importantインラインスタイルIDセレクタクラスセレクタ
属性セレクタ
擬似クラス要素セレクタ擬似要素ユニバーサルセレクタCSSの基礎知識
0inline1id0class0element#header {…}CSSの基礎知識
0inline1id1class0element#header .inner {…}CSSの基礎知識
・重要度・詳細度・宣言順CSSの基礎知識
TEXTp {color: gray;}CSSの基礎知識
TEXTp {color: gray;}TEXTp {color: navy; /* 同じプロパティは上書き */
background-color: pink;}CSSの基礎知識
TEXTTEXTp {color: white;}TEXTp {color: gray;}/* プロパティが被ってなければ継承 */p {color: navy;
background-color: pink;}CSSの基礎知識
CSS設計手法Chapter05
OOCSSObject Oriented CSSの略称。
コンポーネント化が難しいCSSにオブジェクト指向の概念を取り入れ
パフォーマンスと再利用性を向上させた手法。様々なCSS設計のベースになっており非常に大切な概念。
米ヤフーのNicole Sullivan氏によって考案された。CSS設計手法 / OOCSS
・構造と見た目の分離・コンテナとコンテンツの分離CSS設計手法 / OOCSS
・構造と見た目の分離・コンテナとコンテンツの分離CSS設計手法 / OOCSS
Read MoreCSS設計手法 / OOCSSSubmit
.btn-more {display: inline-block;padding: 10px 20px;text-align: center;min-width: 200px;color: white;background-color: pink;}.btn-submit {display: inline-block;padding: 10px 20pxtext-align: center;min-width: 200px;color: navy;background-color: green;}CSS設計手法 / OOCSS<a class="btn-more" href=""></a><a class="btn-submit" href=""></a>
CSS設計手法 / OOCSS<a class=“btn btn-more" href=""></a><a class=“btn btn-submit" href=""></a>.btn {display: inline-block;padding: 10px 20px;text-align: center;min-width: 200px;}.btn-more {color: white;background-color: pink;}.btn-submit {color: navy;background-color: green;}
・構造と見た目の分離・コンテナとコンテンツの分離CSS設計手法 / OOCSS
Contents TitleContents の本文が入ります。Side TitleCSS設計手法 / OOCSS
.contents .wrap h2 {…} 

.sidebar h2 {…}<div class="contents"><div class="wrap"><h2>Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2>Side Title</h2></div>CSS設計手法 / OOCSS
.heading {color: pink;border-bottom: 1px solid;padding-bottom: 5px;margin-bottom: 10px;font-size: 2.4rem;font-weight: 700;}<div class="contents"><div class="wrap"><h2 class="heading">Contents Title</h2><p>Contents の本文が入ります。</p></div></div><div class="sidebar"><h2 class="heading">Side Title</h2></div>CSS設計手法 / OOCSS
SMACSSScalable and Modular Architecture for CSSの略称。
CSSを5種類にカテゴライズすることでサイト内で使われているパターンを明確にし制作とメンテナンスをより容易に行うテクニック。
元米ヤフーのJonathan Snook氏によって考案された。CSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
Baseはプロジェクトにおける、各要素のデフォルトのスタイルを定義します。normalize.css、sanitize.cssなどもこちらに含まれます。html {margin: 0;padding: 0;font-size: 62.5%;line-height: 1.5;font-family: "Noto Sans Japanese", sans-serif;}body {background: #f5f5f5;}a {color: #000;}CSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
Layoutはヘッダー、コンテンツエリアなどページを構成する大枠のスタイルを定義します。
グリッドなどのルールもこちらに含まれます。
命名規則として「l-」プレフィックスをつけることが推奨されています。.l-header {margin: 20px 40px;}.l-main {float: left;width: 80%;}.l-footer {background: #333;margin: 20px 40px;}.l-grid {display: table;
}CSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
ModuleはLayout以外のサイトを構成する要素を定義します。命名規則として、Moduleに内包される要素には
Module名をプレフィックスとして引き継ぎます。.card {display: inline-block;text-align: center;}.btn {width: 200px;height: 80px;}.title {font-size: 2.7rem;}.{text-align: center;}CSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
Stateはタブのアクティブ時やアラートのエラーメッセージなど
状態が変化するスタイルを定義します。
命名規則として「is-」プレフィックスをつけます。.is-active {display: block;}.is-tab-active {background: #eee;}.is-alert-error {color: red;}CSS設計手法 / SMACSS
・Base・Layout・Module・State・ThemeCSS設計手法 / SMACSS
言語や国によって、テーマカラーやフォントの設定を変更する場合などに定義します。
(このカテゴリを使用する機会は少ないです)命名規則として、「theme-」プレフィックスをつけます。.theme-font-en {font-family: "Helvetica Neue", sans-serif;font-size: 1.6rem;}.theme-background {background: blue;}.theme-border {border: 1px solid #ccc
}CSS設計手法 / SMACSS
BEMBlock Element Modifierの略称。
HTML構造を明確にすることを軸に置いた設計手法。
厳格なclassの命名規則が特徴。ロシアのYandex社によって考案された。CSS設計手法 / BEM
・Block・Element・ModifierCSS設計手法 / BEM
・Block・Element・ModifierCSS設計手法 / BEM
CSS設計手法 / BEMHack Dayに
参加してきました。桜舞い散る風情に春という季節を感じているエンジニアの吉田でございます。
ちょっと業務がバタついてブログ書くのが一か月ほど遅れましたが、2015/3/7（土）∼READ MOREBlockはページを構成する1つのかたまりを指します。.news {background-color: #fff;padding: 20px;}
・Block・Element・ModifierCSS設計手法 / BEM
CSS設計手法 / BEMElementはBlockを構成する1部分を指します。命名規則としてBlock名を引き継ぎ block__element と記述します。Hack Dayに
参加してきました。桜舞い散る風情に春という季節を感じているエンジニアの吉田でございます。
ちょっと業務がバタついてブログ書くのが一か月ほど遅れましたが、2015/3/7（土）∼READ MORE.news__text {color: #8B7577;margin-bottom: 25px;
}.news__btn {padding: 5px 10px;display: inline-block;border: 1px solid #pink;
color: #pink;
}
・Block・Element・ModifierCSS設計手法 / BEM
CSS設計手法 / BEMModifireはBlockまたはElementのバリエーション違いの要素を指します。
命名規則としてBlock_Modifierまたは Block__Element_Modifierと記述します。Hack Dayに
参加してきました。桜舞い散る風情に春という季節を感じているエンジニアの吉田でございます。
ちょっと業務がバタついてブログ書くのが一か月ほど遅れましたが、2015/3/7（土）∼.news__btn {padding: 5px 10px;display: inline-block;border: 1px solid pink;
color: pink;
}.news__btn_color_primary {border: 1px solid green;
color: green;
}READ MORE
CSS設計手法 / BEMBEMBlock__Element_Modifier
CSS設計手法 / BEMMindBEMdingBlock__Element—Modifier
・MCSS・FLOCSS・ITCSS・RSCSS・AMCSS・SUIT CSS 等CSS設計手法 / その他その他のCSS設計手法
参考文献
CSS 設計の教科書http://goo.gl/MspHyM
CSS Architecturehttp://article.enja.io/articles/css-architecture.html

Code smells in CSS
http://article.enja.io/articles/code-smells-in-css.html使いやすいWordPressのためのCSSのつくりかた
http://www.slideshare.net/Toro_Unit/wordpresscss

CSS設計の基礎を見直す
http://gihyo.jp/dev/serial/01/js-foundation/0009
100年後も崩れないCSS勉強会 第1回「詳細度」http://pepabo.github.io/css/specificity/100年後も崩れないCSS勉強会 第2回「コンポーネント」http://pepabo.github.io/css/component/
[CSS] Object Oriented CSSを学んで綺麗なコードを書くhttp://www.yoheim.net/blog.php?q=20141201

SMACSS 読んだ
http://chroma.hatenablog.com/entry/2013/07/22/120818

BEMとは何か？
https://github.com/juno/bem-methodology-ja/blob/master/definitions.md

Recommended

PDF
壊れやすいCSS
PDF
Css拡張言語のコトハジメ
PDF
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
PDF
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
PDF
Webエンジニアのための
プロジェクションマッピング
PDF
D3.jsを使った情報可視化をしてみた
PDF
ねぇねぇ、君は何使う？Web Design tool の話。
PDF
Physical Web導入の話
PDF
使いやすいWordPressのためのCSSのつくりかた
PDF
CSS3 Design Recipe
PPT
CSS勉強会
PDF
更に進化するCSSの表現力と新しいWebツール （アドビセッション @HTML5 Conference 2012）
PDF
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
PDF
PDF
ネストを覚えた人のためのSassの便利な使い方
PDF
CSS の歩き方
PDF
Css Architecture for the future 未来を見据えるCSS設計
PDF
2017: A CSS Design Odyssey
PDF
マークアップ講座 02 CSS
PDF
Basic CSS Introduction
PDF
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
PDF
Css
PPTX
Cssによるレイアウト
PDF
今更ながらCSS3を試してみた
PDF
メディア芸術基礎 Ⅰ 第４回：CSS入門 情報の形を視覚化する
PDF
今必要なCSSアーキテクチャ
PPTX
css for Kubo Semi 2014
PDF
情報編集(Web) 第５回：CSS入門 情報の形を視覚化する

More Related Content

PDF
壊れやすいCSS
PDF
Css拡張言語のコトハジメ
PDF
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
PDF
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
PDF
Webエンジニアのための
プロジェクションマッピング
PDF
D3.jsを使った情報可視化をしてみた
PDF
ねぇねぇ、君は何使う？Web Design tool の話。
PDF
Physical Web導入の話
壊れやすいCSS
Css拡張言語のコトハジメ
Webエンジニアのためのプロジェクションマッピング(とりあえず完結編)
役に立ちそうだけど、やっぱり役に立たなそうな技術Quine
Webエンジニアのための
プロジェクションマッピング
D3.jsを使った情報可視化をしてみた
ねぇねぇ、君は何使う？Web Design tool の話。
Physical Web導入の話

Similar to CSSの光と闇

PDF
使いやすいWordPressのためのCSSのつくりかた
PDF
CSS3 Design Recipe
PPT
CSS勉強会
PDF
更に進化するCSSの表現力と新しいWebツール （アドビセッション @HTML5 Conference 2012）
PDF
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
PDF
PDF
ネストを覚えた人のためのSassの便利な使い方
PDF
CSS の歩き方
PDF
Css Architecture for the future 未来を見据えるCSS設計
PDF
2017: A CSS Design Odyssey
PDF
マークアップ講座 02 CSS
PDF
Basic CSS Introduction
PDF
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
PDF
Css
PPTX
Cssによるレイアウト
PDF
今更ながらCSS3を試してみた
PDF
メディア芸術基礎 Ⅰ 第４回：CSS入門 情報の形を視覚化する
PDF
今必要なCSSアーキテクチャ
PPTX
css for Kubo Semi 2014
PDF
情報編集(Web) 第５回：CSS入門 情報の形を視覚化する
使いやすいWordPressのためのCSSのつくりかた
CSS3 Design Recipe
CSS勉強会
更に進化するCSSの表現力と新しいWebツール （アドビセッション @HTML5 Conference 2012）
CSS は、もっと楽になる – LESS を活用してコーディング作業をシンプルに
ネストを覚えた人のためのSassの便利な使い方
CSS の歩き方
Css Architecture for the future 未来を見据えるCSS設計
2017: A CSS Design Odyssey
マークアップ講座 02 CSS
Basic CSS Introduction
まだ間に合う「CSS設計」ことはじめ。CSSの闇に飲み込まれないための考え方。
Css
Cssによるレイアウト
今更ながらCSS3を試してみた
メディア芸術基礎 Ⅰ 第４回：CSS入門 情報の形を視覚化する
今必要なCSSアーキテクチャ
css for Kubo Semi 2014
情報編集(Web) 第５回：CSS入門 情報の形を視覚化する

CSSの光と闇

[8]ページ先頭
©2009-2025 Movatter.jp