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
Search
snookca
September 18, 2012
Programming
129
18k
Your CSS is a Mess
Looking at 3 simple ways to keep your CSS more organized (and more modular)
snookca
September 18, 2012
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
970
Responsive Web Applications
snookca
0
170
Responsive Web Applications with Container Queries
snookca
3
680
Responsive Web Applications
snookca
0
98
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
効率的な開発手段として VRTを活用する
ishkawa
0
140
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Hypervel - A Coroutine Framework for Laravel Artisans
albertcht
1
130
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
5
1.1k
AI コーディングエージェントの時代へ:JetBrains が描く開発の未来
masaruhr
1
150
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
4k
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
1k
A2A プロトコルを試してみる
azukiazusa1
2
1.4k
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
nealle
1
10k
Startups on Rails in Past, Present and Future–Irina Nazarova, RailsConf 2025
irinanazarova
0
110
Porting a visionOS App to Android XR
akkeylab
0
460
Featured
See All Featured
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Writing Fast Ruby
sferik
628
62k
Statistics for Hackers
jakevdp
799
220k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Optimizing for Happiness
mojombo
379
70k
The Straight Up "How To Draw Better" Workshop
denniskardys
234
140k
The World Runs on Bad Software
bkeepers
PRO
69
11k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
Designing Experiences People Love
moore
142
24k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Transcript
None
Jonathan Snoovvk The V’s are silent
YOUR CSS IS A MESS
None
None
1 person.
None
4 designers.
5 developers.
1 team.
1 project.
None
30 designers.
5 prototypers.
200 engineers.
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; }
.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
{}
#nav-header ul li { float: left; } #nav-content ul li
{ float: left; }
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
None
None
None
Module
Customized List Button Tabs
None
None
None
None
None
None
None
Sub-modules
Large Search Dark Small
None
None
State
Active State Default State Disabled State Default State
Theme
None
None
None
2 Naming Convention
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.
.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 {}
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.
Have your CSS... Do one thing and one thing only
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
GET SMACKED http://smacss.com/