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
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
2
900
ぬるぬる動かせ! Riveでアニメーション実装🐾
kno3a87
1
130
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.4k
オープンセミナー2025@広島LT技術ブログを続けるには
satoshi256kbyte
0
180
プロポーザル駆動学習 / Proposal-Driven Learning
mackey0225
2
960
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
210
意外と簡単!?フロントエンドでパスキー認証を実現する WebAuthn
teamlab
PRO
2
660
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
6
2k
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
270
Namespace and Its Future
tagomoris
6
700
AI時代のUIはどこへ行く?
yusukebe
16
8.4k
testingを眺める
matumoto
1
130
Featured
See All Featured
Six Lessons from altMBA
skipperchong
28
4k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Speed Design
sergeychernyshev
32
1.1k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
Fireside Chat
paigeccino
39
3.6k
A Tale of Four Properties
chriscoyier
160
23k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How GitHub (no longer) Works
holman
315
140k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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