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
250
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
950
Responsive Web Applications
snookca
0
150
Responsive Web Applications with Container Queries
snookca
3
660
Responsive Web Applications
snookca
0
93
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
AI時代のプログラミング教育 / programming education in ai era
kishida
22
18k
イベントソーシングによってインピーダンスミスマッチから解放された話
tkawae
1
270
Google Cloudとo11yで実現するアプリケーション開発者主体のDB改善
nnaka2992
1
210
令和トラベルにおけるコンテンツ生成AIアプリケーション開発の実践
ippo012
1
230
Effective Signals in Angular 19+ Rules and Helpers
manfredsteyer
PRO
0
160
運用しながらリアーキテクチャ
nealle
0
350
ステートソーシング型イベント駆動の視点で捉えるCQRS+ES
shinnosuke0522
0
280
Cloudflare Pagesのサイトを NotebookLMから読みやすくする Cloudflare Meet-up Tokyo Vol.7
xiombatsg
0
110
Functional APIから再考するLangGraphを使う理由
os1ma
4
630
DenoでOpenTelemetryに入門する
yotahada3
2
270
snacks.nvim内のセットアップ不要なプラグインを紹介 / introduce_snacks_nvim
uhooi
0
280
AtCoder Heuristic First-step Vol.1 講義スライド(山登り法・焼きなまし法編)
takumi152
3
840
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Site-Speed That Sticks
csswizardry
4
440
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
176
52k
A Philosophy of Restraint
colly
203
16k
Building an army of robots
kneath
303
45k
We Have a Design System, Now What?
morganepeng
51
7.5k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7.1k
Bash Introduction
62gerente
611
210k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
227
22k
The Language of Interfaces
destraynor
156
24k
Git: the NoSQL Database
bkeepers
PRO
429
65k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
28
2k
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