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.4k
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
870
Responsive Web Applications
snookca
0
120
Responsive Web Applications with Container Queries
snookca
3
610
Responsive Web Applications
snookca
0
80
The Future is In Pieces
snookca
1
140
Becoming a Deep Generalist
snookca
1
450
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
210
Other Decks in Programming
See All in Programming
Node.js v22 で変わること
yosuke_furukawa
PRO
4
1.1k
ONE WEDGE_company_guide
1wedge_one
0
460
Anthropic Cookbook のおすすめレシピ
schroneko
7
870
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.1k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.3k
educure_カリキュラム生操作マニュアル.pdf
linew_official
0
700
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
940
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
検証も兼ねて個人開発でHonoとかと向き合った話
hanetsuki
0
690
Elm 0.19.0 Changes
bkuhlmann
0
490
Designing for tomorrow's programming workflows
honnibal
PRO
2
120
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
9
8.3k
The Mythical Team-Month
searls
216
42k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Designing with Data
zakiwarfel
96
4.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
78
42k
What's in a price? How to price your products and services
michaelherold
237
11k
For a Future-Friendly Web
brad_frost
172
9k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
YesSQL, Process and Tooling at Scale
rocio
164
13k
Being A Developer After 40
akosma
57
580k
Building Effective Engineering Teams - LeadDev
addyosmani
28
1.8k
Designing Experiences People Love
moore
136
23k
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