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
690
Responsive Web Applications
snookca
0
110
The Future is In Pieces
snookca
1
160
Becoming a Deep Generalist
snookca
1
500
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
190
Your CSS is a Mess from SmartWeb
snookca
0
240
Other Decks in Programming
See All in Programming
Performance for Conversion! 分散トレーシングでボトルネックを 特定せよ
inetand
0
140
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
1
200
[FEConf 2025] 모노레포 절망편, 14개 레포로 부활하기까지 걸린 1년
mmmaxkim
0
1.6k
デザイナーが Androidエンジニアに 挑戦してみた
874wokiite
0
360
CloudflareのChat Agent Starter Kitで簡単!AIチャットボット構築
syumai
2
490
Swift Updates - Learn Languages 2025
koher
2
470
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.7k
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
390
OSS開発者という働き方
andpad
5
1.7k
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
10
4k
アセットのコンパイルについて
ojun9
0
120
Vue・React マルチプロダクト開発を支える Vite
andpad
0
110
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing Experiences People Love
moore
142
24k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Done Done
chrislema
185
16k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Why Our Code Smells
bkeepers
PRO
339
57k
jQuery: Nuts, Bolts and Bling
dougneiner
64
7.9k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
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