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 SmartWeb
Search
snookca
September 24, 2013
Programming
0
220
Your CSS is a Mess from SmartWeb
As presented at SmartWeb Conference in Bucharest, Romania
snookca
September 24, 2013
Tweet
Share
More Decks by snookca
See All by snookca
Responsive Web Applications
snookca
0
1.6k
Responsive Web Applications
snookca
4
910
Responsive Web Applications
snookca
0
140
Responsive Web Applications with Container Queries
snookca
3
640
Responsive Web Applications
snookca
0
89
The Future is In Pieces
snookca
1
140
Becoming a Deep Generalist
snookca
1
480
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
How to Write a Book
snookca
4
360
Other Decks in Programming
See All in Programming
C#/.NETのこれまでのふりかえり
tomokusaba
1
160
カスタムしながら理解するGraphQL Connection
yanagii
1
1.2k
Vitest Browser Mode への期待 / Vitest Browser Mode
odanado
PRO
2
1.7k
ピラミッド、アイスクリームコーン、SMURF: 自動テストの最適バランスを求めて / Pyramid Ice-Cream-Cone and SMURF
twada
PRO
9
1k
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
360
Tuning GraphQL on Rails
pyama86
2
1k
Golang と Erlang
taiyow
8
1.9k
推し活としてのrails new/oshikatsu_ha_iizo
sakahukamaki
3
1.7k
Kubernetes for Data Engineers: Building Scalable, Reliable Data Pipelines
sucitw
1
200
gopls を改造したら開発生産性が高まった
satorunooshie
8
240
Modern Angular: Renovation for Your Applications
manfredsteyer
PRO
0
210
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
400
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Building Applications with DynamoDB
mza
90
6.1k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Fantastic passwords and where to find them - at NoRuKo
philnash
50
2.8k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5k
Building an army of robots
kneath
302
42k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
The Cult of Friendly URLs
andyhume
78
6k
Scaling GitHub
holman
458
140k
Designing for humans not robots
tammielis
249
25k
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
{}
None
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
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://www.smartwebconf.com/">SmartWeb</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://www.smartwebconf.com/">SmartWeb</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://www.smartwebconf.com/">SmartWeb</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://www.smartwebconf.com/">SmartWeb</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!