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
260
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
960
Responsive Web Applications
snookca
0
160
Responsive Web Applications with Container Queries
snookca
3
670
Responsive Web Applications
snookca
0
95
The Future is In Pieces
snookca
1
150
Becoming a Deep Generalist
snookca
1
490
Your CSS is a Mess from ShropGeek's Revolution Conf
snookca
4
170
Your CSS is a Mess from SmartWeb
snookca
0
230
Other Decks in Programming
See All in Programming
eBPF超入門「o11yに使える」とは (20250424_eBPF_o11y)
thousanda
1
120
Instrumentsを使用した アプリのパフォーマンス向上方法
hinakko
0
260
CRUD から CQRS へ ~ 分離が可能にする柔軟性
tkawae
0
170
ソフトウェア品質特性、意識してますか?AIの真の力を引き出す活用事例 / ai-and-software-quality
minodriven
16
4.8k
TVer iOSチームの共通認識の作り方 - Findy Job LT iOSアプリ開発の裏側 開発組織が向き合う課題とこれから
techtver
PRO
0
110
CursorとDevinが仲間!?AI駆動で新規プロダクト開発に挑んだ3ヶ月を振り返る / A Story of New Product Development with Cursor and Devin
rkaga
5
1.4k
クラシルリワードにおける iOSアプリ開発の取り組み
funzin
1
230
Digging into the Matrix: Practicing Code Archaeology
arthurdoler
PRO
0
120
Browser and UI #2 HTML/ARIA
ken7253
2
190
flutter_kaigi_mini_4.pdf
nobu74658
0
160
Duke on CRaC with Jakarta EE
ivargrimstad
1
330
監視 やばい
syossan27
12
10k
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Documentation Writing (for coders)
carmenintech
71
4.8k
It's Worth the Effort
3n
184
28k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
32
5.8k
Fireside Chat
paigeccino
37
3.4k
Become a Pro
speakerdeck
PRO
28
5.3k
Producing Creativity
orderedlist
PRO
344
40k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
137
33k
Typedesign – Prime Four
hannesfritz
41
2.6k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
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