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 Webvisions
Search
snookca
May 24, 2013
Technology
6
550
Your CSS is a Mess from Webvisions
As presented at Webvisions Portland 2013 on May 24.
snookca
May 24, 2013
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
160
Responsive Web Applications with Container Queries
snookca
3
680
Responsive Web Applications
snookca
0
97
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 Technology
See All in Technology
PHPでWebブラウザのレンダリングエンジンを実装する
dip_tech
PRO
0
210
25分で解説する「最小権限の原則」を実現するための AWS「ポリシー」大全 / 20250625-aws-summit-aws-policy
opelab
9
1.2k
Witchcraft for Memory
pocke
1
560
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
100
生成AI活用の組織格差を解消する 〜ビジネス職のCursor導入が開発効率に与えた好循環〜 / Closing the Organizational Gap in AI Adoption
upamune
5
4.1k
WordPressから ヘッドレスCMSへ! Storyblokへの移行プロセス
nyata
0
160
BrainPadプログラミングコンテスト記念LT会2025_社内イベント&問題解説
brainpadpr
1
170
ひとり情シスなCTOがLLMと始めるオペレーション最適化 / CTO's LLM-Powered Ops
yamitzky
0
450
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
370
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
5
540
生成AI時代の開発組織・技術・プロセス 〜 ログラスの挑戦と考察 〜
itohiro73
1
320
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
150
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Rails Girls Zürich Keynote
gr2m
94
14k
BBQ
matthewcrist
89
9.7k
Balancing Empowerment & Direction
lara
1
380
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
The Language of Interfaces
destraynor
158
25k
Practical Orchestrator
shlominoach
188
11k
Measuring & Analyzing Core Web Vitals
bluesmoon
7
490
Embracing the Ebb and Flow
colly
86
4.7k
Agile that works and the tools we love
rasmusluckow
329
21k
How GitHub (no longer) Works
holman
314
140k
Testing 201, or: Great Expectations
jmmastey
42
7.5k
Transcript
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; }
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 {}
#nav-header ul li { float: left; ... } #nav-content ul
li { float: left; ... }
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
#comments .comment .meta .authorname {} #comments .comment .meta .commentnumber a
{}
/* ======== 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
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
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 {}
.modal {} .modal-large .modal-header {} .modal-body {} .modal-footer {}
None
.btn {} .is-btn-active {} .is-btn-disabled {}
.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://webvisionsevent.com/">Webvisions</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://webvisionsevent.com/">Webvisions</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://webvisionsevent.com/">Webvisions</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
Or make the html predictable
<div class="box"> <h2>Sites I Like</h2> <div class="box-body"> <ul> <li><a href="http://webvisionsevent.com/">Webvisions</a></li>
<li><a href="http://smacss.com/">SMACSS</a></li> </ul> </div> </div> <div class="box"> <h2>About Us</h2> <div class="box-body"> <p>The Fancy Pants Company is all about fancy pants.</p> </div> </div> <div class="box"> <h2>Sponsored By</h2> <div class="box-body"><img src="..." alt="..."></div> </div>
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
http://smacss.com/ Thanks!