Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
State-based Design
Search
snookca
September 21, 2012
Programming
11
3.5k
State-based Design
A look at what it means to create CSS using a state-based approach.
snookca
September 21, 2012
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
980
Responsive Web Applications
snookca
0
170
Responsive Web Applications with Container Queries
snookca
3
680
Responsive Web Applications
snookca
0
99
The Future is In Pieces
snookca
1
160
Becoming a Deep Generalist
snookca
1
490
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
180
Your CSS is a Mess from SmartWeb
snookca
0
240
Other Decks in Programming
See All in Programming
QA x AIエコシステム段階構築作戦
osu
0
200
React は次の10年を生き残れるか:3つのトレンドから考える
oukayuka
40
15k
20250708_JAWS_opscdk
takuyay0ne
2
150
Git Sync を超える!OSS で実現する CDK Pull 型デプロイ / Deploying CDK with PipeCD in Pull-style
tkikuc
4
470
脱Riverpod?fqueryで考える、TanStack Queryライクなアーキテクチャの可能性
ostk0069
0
570
顧客の画像データをテラバイト単位で配信する 画像サーバを WebP にした際に起こった課題と その対応策 ~継続的な取り組みを添えて~
takutakahashi
4
1.4k
ZeroETLで始めるDynamoDBとS3の連携
afooooil
0
130
ご注文の差分はこちらですか? 〜 AWS CDK のいろいろな差分検出と安全なデプロイ
konokenj
4
700
ソフトウェア設計とAI技術の活用
masuda220
PRO
25
6.9k
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
200
テストから始めるAgentic Coding 〜Claude Codeと共に行うTDD〜 / Agentic Coding starts with testing
rkaga
17
6.1k
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
2
180
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
50
5.5k
The Cult of Friendly URLs
andyhume
79
6.5k
Automating Front-end Workflow
addyosmani
1370
200k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
530
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.5k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Building Adaptive Systems
keathley
43
2.7k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
110
19k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
850
Designing Experiences People Love
moore
142
24k
Transcript
State-based design
.layout_1_2 #blogList .pageitem .statusBar {} .layout_1_2 #blogList .pageitem .statusBar .status,
#blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 a { } .layout_1_2 #blogList .pageitem .statusBar .status .status1 .sep {}
#nav-header ul li { float: left; } #nav-content ul li
{ float: left; }
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
None
None
CSS is easy.
None
None
li { }
oat: left padding: 3px 50px; margin: 0;
.block { display:block !important; } .inline { display:inline !important; }
.hide { display:none !important; } .s-none { margin:0 !important; } .s { margin:10px !important; } .ss { margin:20px !important; } .sr { margin-right:10px !important; } .p-none { padding:0 !important; } .p { padding:10px !important; } .pp { padding:20px !important; } .pt { padding-top:10px !important; } .w-auto { width:auto !important; }
What does it mean?
Shift your thinking
Don’t code CSS for a page. Code it for a
system.
Think Modularly.
Think Modularly.
Scalable and Modular Architecture for CSS
What is SMACSS?
Have your CSS... Do one thing and one thing only
Your code should... Be clear regardless of context
Categorization Naming Convention
Categorization
Base
html { background-color: #FFF; font-family: Arial, Helvetica, sans-serif; font-size: 14px;
} body { margin: 0; padding: 0; } h1, h2, h3 { margin: 1em 0; }
Layout
None
Sidebar Content Header
None
None
None
Module
Customized List Button Tabs
None
None
None
None
None
None
None
Sub-modules
Large Search Dark Small
None
None
Theme
None
None
None
State?
State-based Design • Class-based states • Attribute-based states • Pseudo-class
states • Media query states
Class-based State
Active State Default State Disabled State Default State
.is-btn-active { box-shadow: inset 3px 3px 5px #333; } .is-btn-disabled
{ opacity: .5; pointer-events: none; }
/* general class-based state */ .is-hidden { }
$('.btn').on('mousedown', function(){ $(this).addClass('is-btn-pressed'); }); $('.btn').on('mouseup', function(){ $(this).removeClass('is-btn-pressed'); });
Attribute Selector State
.btn[data-state=default] { color: #333; } .btn[data-state=pressed] { color: #000; }
.btn[data-state=disabled] { opacity: .5; pointer-events: none; } <!-- HTML --> <button class="btn" data- state="disabled">Disabled</button>
// bind a click handler to each button $(".btn").on("click", function(){
// change the state to pressed $(this).attr('data-state', 'pressed'); });
Pseudo-class State
/* Pseudo-class state */ .callout:hover { } .callout:focus { }
:hover :focus :active :checked :indeterminate :valid :invalid :in-range :out-of-range
Media Query State
@media screen and (max-width: 400px) { .layout-content { float: none;
} }
/* default state for nav items */ .nav > li
{ float: none; } /* alternate state for nav items on larger screens */ @media screen and (min-width: 400px) { .nav > li { float: left; } }
/* default layout */ .l-content { float: left; width: 75%;
} .l-sidebar { float: right; width: 25%; } /* alternate state for layout on small screens */ @media screen and (max-width: 400px) { .l-content, .l-sidebar { float: none; width: auto; } }
Examples
None
None
None
http://icefox.net/anigma/
http://my-html-codes.com/HTML5_tutorials/Dino_pairs2/index.html
<div class="card"> <div class="card card-flipped">
.input-option { display: none; } /* Pseudo-class state */ input:checked
~ .input-option { display: block; }
<input type="checkbox" id="opt"> <label for="opt">Other?</label> <div class="input-option"> <input type="text" id="other">
<label for="other">Please specify:</ label> </div>
Sprite Animations
#sprite { width:64px; height:64px; background:url(sprite.png) 0 0; }
@-webkit-keyframes walking { 0%! ! { background-position: 448px 0; }
}
.is-walking { -webkit-animation-duration:600ms; -webkit-animation-iteration-count:infinite; -webkit-animation-timing-function:steps(7,end); -webkit-animation-name:walking; -webkit-animation-fill-mode: both; } .is-walking-faster
{ -webkit-animation-duration:400ms; } .is-walking-backwards { -webkit-animation-direction: reverse; }
var el=document.getElementById('sprite')
el.classList.toggle('is-walking');
toggle('is-walking'); toggle('is-walking-faster'); toggle('is-walking-backwards');
CSS Panic http://snk.ms/15
.enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:
button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;
.enemys { z-index:3; position:absolute; top:0px; left:0; width:49px; height:93px; display:block; -webkit-appearance:
button; -moz-appearance: button; background-position:0px 0px; background-repeat:no-repeat; -webkit-animation-iteration-count:infinite cursor:pointer; opacity:0.9; border:none;
.enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
.enemys:checked{ overflow:hidden; -webkit-animation-name: none; -webkit-pointer-events: none; pointer-events: none; opacity:0; }
GET SMACKED http://smacss.com/
None