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
Your CSS is a Mess from Rustbelt Refresh
Search
snookca
May 03, 2013
Programming
4
270
Your CSS is a Mess from Rustbelt Refresh
As presented at Rustbelt Refresh 2013 in Cleveland, OH.
snookca
May 03, 2013
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 Coding Agentのセキュリティリスク:PRの自己承認とメルカリの対策
s3h
0
150
250830 IaCの選定~AWS SAMのLambdaをECSに乗り換えたときの備忘録~
east_takumi
0
380
Go言語での実装を通して学ぶLLMファインチューニングの仕組み / fukuokago22-llm-peft
monochromegane
0
120
Kiroの仕様駆動開発から見えてきたAIコーディングとの正しい付き合い方
clshinji
1
200
Claude Codeで挑むOSSコントリビュート
eycjur
0
200
「待たせ上手」なスケルトンスクリーン、 そのUXの裏側
teamlab
PRO
0
350
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
20
5.1k
Swift Updates - Learn Languages 2025
koher
2
460
Honoアップデート 2025年夏
yusukebe
1
920
MLH State of the League: 2026 Season
theycallmeswift
0
230
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.4k
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Raft: Consensus for Rubyists
vanstee
140
7.1k
BBQ
matthewcrist
89
9.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
For a Future-Friendly Web
brad_frost
180
9.9k
Designing for Performance
lara
610
69k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
236
140k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
The Cult of Friendly URLs
andyhume
79
6.6k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
46
7.6k
Transcript
YOUR CSS IS A MESS
None
None
None
1 person.
None
4 designers.
5 developers.
1 team.
1 project.
None
30 designers.
None
200 engineers.
5 prototypers.
multiple teams.
multiple projects.
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; }
None
.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 {}
.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 {}
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
#nav-header ul li { float: left; ... } #nav-content ul
li { float: left; ... }
/* ======== SECTION: STYLE VARIABLES ======== */ $icon_sprite:url('icon-sprite.png') no-repeat; $black_header_height:40px;
$content_header_height:66px; $container_width:994px; $sidebar_width:158px; $page_width: $container_width - $sidebar_width - 20px; $outer_page_width: $container_width - $sidebar_width; /* ======== END SECTION: STYLE VARIABLES ======== */ /* ======== SECTION: 4.0. SCSS MIXINS ======== */ /* 4.2. Transitions */ @mixin transition($properties:all,$timing:0.3s,$transition:ease-in-out,$delay:0.0s) { -o- transition: $properties $timing $transition $delay; -webkit-transition: $properties $timi $transition $delay; -moz-transition: $properties $timing $transition $delay; } /* 4.3. Box Shadows */ @mixin box-shadow($s1) { -webkit-box-shadow:$s1; -moz-box-shadow:$s1; box-shadow:$s1; } @mixin double-box-shadow($s1,$s2:0 0 0 rgba(0,0,0,0)) { -webkit-box-shadow:$s1,$s2; -moz- shadow:$s1,$s2; box-shadow:$s1,$s2; } /* 4.4. Rounded Corners */ @mixin rounded($px:3px) { -webkit-border-radius:$px; -moz-border-radius:$px; border-radiu $px; } /* 4.5. Border Radius */ @mixin border-radius($tr,$tl,$br,$bl) { -moz-border-radius:$tr $tl $br $bl; -webkit-borde radius:$tr $tl $br $bl; border-radius:$tr $tl $br $bl; } /* 4.6. Gradients */ @mixin gradient($color1, $color2) { background-color:$color1; background-image:-o-linear- gradient($color2, $color1); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, $color1),color-stop(1, $color2)); background-image: -moz-linear-
None
None
Scalable and Modular Architecture for CSS
SMACSS
3 Considerations
3 Categorization Naming Convention Decouple HTML/CSS
1 Categorization
Categorization • Base • Layout • Module • State •
Theme
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 Footer
None
Sidebar Content Header
None
None
Module
Customized List Button Tabs
None
None
None
None
None
None
None
Sub-modules
Large Search Dark Small
None
None
Sub-components
None
None
State
Active State Default State Disabled State Default State
Theme
None
None
None
Have your CSS (and HTML)... Do one thing and one
thing only
http://snk.ms/1r The Single Responsibility Theory
<div class="grid"> <div class="col module">...</div> </div>
.grid {} .col { float:left; } .col:nth-child(2n) { clear:left; }
.module { display:inline-block; }
<div class="grid"> <div class="col"> <div class="module">...</div> </div> </div>
<ul class="grid"> <li class="module">...</li> </ul>
.grid {} .grid > li { float:left; } .grid >
li:nth-child(2n) { clear:left; } .module { display:inline-block; }
<ul class="grid"> <li> <div class="module">...</div> </li> </ul>
<ul class="grid"> <li> {{item}} </li> </ul>
<li class="module">...</li> <div class="module">...</div>
Categorization is about Isolation
2 Naming Convention
None
Naming Convention Naming convention clari es intent
Use Class over ID Don’t use a grenade to dig
a hole when a shovel will do.
Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-
elements) style="..." #article .article :hover [attr=val] a : rst-child
Specificity Inline ID Class (pseudo-classes and attribute selectors) Element (pseudo-
elements) style="..." #article .article :hover [attr=val] a : rst-child
a { color: #039; } .subdued { color: #666; }
#cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
None
a { color: #039; } .subdued { color: #666 !important;
} #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
Specificity Buster! !important
Specificity Buster! !important
a { color: #039; } .subdued, #cancel.subdued { color: #666;
} #cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
a { color: #039; } .subdued { color: #666; }
.cancel { color: #900; } <a href="...">Link</a> <a href="..." class="subdued">Link</a> <a href="..." id="cancel" class="cancel">Link</a> <a href="..." id="cancel" class="subdued">Link</a>
.btn {} .btn-large {} .btn-small {} .btn-default {} .btn-search {}
.btn {} .is-btn-active {} .is-btn-disabled {}
.theme-header {} .theme-border {} .theme-background {}
.text-plus1 {} .text-minus1 {}
.modulename .modulename-submodule .modulename-subcomponent No hyphens Always a root node No
hyphens No difference from submodule
.module-name .module-name--submodule .module-name__subcomponent allows for hyphens Always a root node
Alternatives underscores hyphens
.moduleName .moduleName-subModule .moduleName--subComponent camelCase Alternatives double hyphen single hyphen
Naming Convention • Pick a system that works for you
and your team • Be consistent • Consider: • Root node • Sub-modules • Sub-components
3 Decoupling CSS from HTML
.nav { margin: 0; padding: 0; list-style: none; } .nav
li { float: left; } .nav li a { display: block; padding: 5px 10px; background-color: blue; }
<ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a></li> <li><a href="/contact">Contact Us</a></li> </ul>
<ul class="nav"> <li><a href="/">Home</a></li> <li><a href="/products">Products</a> <ul> <li><a href="/products/shoes">Shoes</a></li> <li><a
href="/products/jackets">Jackets</a></li> </ul> </li> <li><a href="/contact">Contact Us</a></li> </ul>
.nav ul { margin: 0; padding:0; list-style:none; } .nav li
li { float: none; } .nav li li a { padding: 2px; background-color: red; }
.nav { margin: 0; padding: 0; list-style: none; } .nav
> li { float: left; } .nav > li > a { display: block; padding: 5px 10px; background-color: blue; }
.menu { margin: 0; padding: 0; list-style: none } .menu
> li > a { display: block; padding: 2px; background-color: red; }
Please. Use child selectors
<div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>
</ul> </div>
.box { border: 1px solid #333; } .box h2 {
margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul { margin: 10px; }
<div class="box"> <h2>Sites I Like</h2> <ul> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a href="http://smacss.com/">SMACSS</a></li>
</ul> </div> <div class="box"> <h2>About Us</h2> <p>The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div><img src="http://example.com/img.png" alt="..."></div> </div>
.box { border: 1px solid #333; } .box h2 {
margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box ul, .box p, .box div { margin: 10px; }
.box { border: 1px solid #333; } .box h2 {
margin: 0; padding: 5px 10px; border-bottom: 1px solid #333; background-color: #CCC; } .box-body { margin: 10px; }
<div class="box"> <h2>Sites I Like</h2> <ul class="box-body"> <li><a href="http://smashingconf.com/">Smashing!</a></li> <li><a
href="http://smacss.com/">SMACSS</a></li> </ul> </div> <div class="box"> <h2>About Us</h2> <p class="box-body">The Fancy Pants Company is all about fancy pants.</p> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>
when the HTML can’t or won’t be predictable Apply a
class
What does it mean?
Shift your thinking
Don’t code CSS for the page. Code it for the
system.
State-based Design
State-based Design • A layout or module style • Sub-modules
• JavaScript-driven states • Pseudo-class states • Media query states
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; }
3 Categorization Naming Convention Decouple HTML/CSS