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
A quick guide for writing MAINTAINABLE and SCAL...
Search
Sergio Álvarez
November 19, 2016
Programming
2
420
A quick guide for writing MAINTAINABLE and SCALABLE CSS
Presented @ Codemotion Madrid 2016
Sergio Álvarez
November 19, 2016
Tweet
Share
Other Decks in Programming
See All in Programming
Reactの歴史を振り返る
tutinoko
1
180
画像コンペでのベースラインモデルの育て方
tattaka
3
1.5k
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
610
Jakarta EE Meets AI
ivargrimstad
0
660
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
570
Gemini CLIの"強み"を知る! Gemini CLIとClaude Codeを比較してみた!
kotahisafuru
3
970
Vibe coding コードレビュー
kinopeee
0
430
「リーダーは意思決定する人」って本当?~ 学びを現場で活かす、リーダー4ヶ月目の試行錯誤 ~
marina1017
0
210
CEDEC 2025 『ゲームにおけるリアルタイム通信への QUIC導入事例の紹介』
segadevtech
3
830
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
240
AIに安心して任せるためにTypeScriptで一意な型を作ろう
arfes0e2b3c
0
340
ライブ配信サービスの インフラのジレンマ -マルチクラウドに至ったワケ-
mirrativ
1
140
Featured
See All Featured
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
450
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
53
2.9k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Mobile First: as difficult as doing things right
swwweet
223
9.9k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Transcript
A QUICK GUIDE FOR WRITING MAINTAINABLE AND SCALABLE CSS
Sergio Álvarez · @sergioalvz_ Software Engineer Breakfast-Driven Development practitioner #CleanCode
#MaintainableCode #CodeForHumans
None
Asturias Hacking
What’s MAINTAINABLE CSS?
What’s SCALABLE CSS?
Any fool can write code that a computer can understand.
Good programmers write code that humans can understand. — MARTIN FOWLER
WHAT’S THE PROBLEM WITH CSS?
It’s global by default
It’s easy to learn, but hard to master
It’s browser dependent
It has a complex specificity system
HOW DOES SPECIFICITY WORK?
button#submit { background-color: red; } button[id="submit"] { background-color: blue; }
What background-color is finally applied to button?
button#submit { background-color: red; } button[id="submit"] { background-color: blue; }
What background-color is finally applied to button?
None
1 #ID 2 Classes & Attributes 3 Elements
1 #ID 2 Classes & Attributes 3 Elements
STRATEGIES FOR DEALING WITH SPECIFICITY
Avoid #selectors. Use nesting wisely. Don’t over qualify.
.nav { /* ... */ } .nav li { /*
... */ } .nav ul { /* ... */ } .nav li ul { /* ... */ } .nav > li { /* ... */ } .nav ul li { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
.nav { /* ... */ } .nav-item { /* ...
*/ } .nav-submenu { /* ... */ } .nav-submenu-item { /* ... */ } Item 1 Item 2 Item 3 Sub Item 1.1 Sub Item 1.2 Sub Item 1.3
WRITING MODULAR CSS
Components are bits of User Interface
Encapsulation. Composition. Documentation.
OOCSS. SMACSS. BEM. ITCSS.
OOCSS. SMACSS. BEM. ITCSS.
It’s a full-featured framework for front-end development powered by Yandex
We’ll only talk about its naming conventions
Feo. Fuerte. Formal.
Block Element Modifier
Block .dropdown { /* ... */ } Edit Remove Update
Element .dropdown__item { /* ... */ } .dropdown__icon { /*
... */ } .dropdown__text { /* ... */ } Edit Remove Update
Modifier .dropdown__item--is-selected { /* ... */ } .dropdown__item--is-disabled { /*
... */ } .dropdown__item--has-only-text { /* ... */ } Edit Remove Update
Edit Remove Update .dropdown { /* ... */ } .dropdown__item
{ /* ... */ } .dropdown__item--is-selected { /* ... */ } .dropdown__item--has-only-text { /* ... */ } .dropdown__text { /* ... */ }
Edit Remove Update <div class="dropdown"> <div> <div class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected">
<span class="dropdown__text"> Update </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Edit </span> </div> <div class="dropdown__item dropdown__item--has-only-text"> <span class="dropdown__text"> Remove </span> </div> </div> </div>
Edit Remove Update <ul class="dropdown"> <li class="dropdown__item dropdown__item--has-only-text dropdown__item--is-selected"> <p
class="dropdown__text"> Update </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Edit </p> </li> <li class="dropdown__item dropdown__item--has-only-text"> <p class="dropdown__text"> Remove </p> </li> </ul>
├── base │ ├── font.css │ └── reset.css ├── components
│ ├── avatar.css │ ├── button.css │ └── dropdown.css ├── modules │ ├── home.css │ └── sidebar.css ├── utilities │ ├── mixins │ └── variables.css ├── vendor │ ├── bootstrap.css │ └── datepicker.css └── main.css Best project organization
BEM… improves semantics. avoids inheritance. reduces specificity.
Prefer duplication over the wrong abstraction — SANDI METZ
DECOUPLING CSS FROM EVERYTHING
BEM has already decoupled our CSS from HTML
What about JavaScript?
<button class="button button--is-secondary"> Cancel </button> document.querySelector( '.button--is-secondary' );
<button class=" js-button button button--is-secondary"> Cancel </button> document.querySelector( ' .js-button
' ); JavaScript hooks!
CUSTOM PROPERTIES THE CSS BUILT-IN VARIABLES
None
.button { font-size: 16px; } .page__text { font-size: 16px; }
.dropdown__item { font-size: 16px; }
:root { --base-font-size: 16px; } .button { font-size: var(--base-font-size); }
.page__text { font-size: var(--base-font-size); } .dropdown__item { font-size: var(--base-font-size); }
.button { background-color: #fc3952; } .dropdown__item--is-selected { background-color: #fc3952; }
.link { color: #fc3952; }
:root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); }
.dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); }
:root { --primary-color: #fc3952; } .button { background-color: var(--primary-color); }
.dropdown__item--is-selected { background-color: var(--primary-color); } .link { color: var(--primary-color); } This can be dynamically updated!
FLEXBOX A NEW LAYOUT MODEL
None
Declarative. Dynamic. Direction-agnostic.
Vertical centering. Sticky footer. Full-height columns. Holy Grail layout.
.box { align-items: center; display: flex; } .box
.page { display: flex; flex-direction: column; min-height: 100vh; } .header
{ height: 4vh; } .content { flex-grow: 1; } .footer { height: 10vh; } .page .header .content .footer
.page .column .column .column .page { display: flex; min-height: 100vh;
} .column { flex-basis: 33%; }
THE FUTURE CODEMOTION 2017
Web Components. CSS Modules. Grid Layout.
RESOURCES
CSS Specificity: Things you should know (Smashing Magazine) · http://bit.ly/2fQpC2R
Hacks for dealing with specificity (Harry Roberts) · http:// bit.ly/2fqUOVy MindBEMding – getting your head ’round BEM syntax (Harry Roberts) · http://bit.ly/2foR5W4 Code smells in CSS (Harry Roberts) · http://bit.ly/2fQnc41
Battling BEM (Extended Edition): 10 Common Problems And How To
Avoid Them (Smashing Magazine) · http:// bit.ly/2fuvjPH CSS at BBC Sport (Part 1) · http://bit.ly/2eLDHuc CSS for Software Engineers for CSS Developers (Harry Roberts) · http://bit.ly/2fI4g8l MaintainableCSS (Adam Silver) · http://bit.ly/2fsrdcw
CSS Flexbox Toolbox - Learning Guides, Tools & Frameworks (speckyboy)
· http://bit.ly/2fr1Gm5 @LeaVerou · http://bit.ly/2ecWx0X @SaraSoueidan · http://bit.ly/2fqZIBT @csswizardry · http://bit.ly/2f6Mvxx
¡GRACIAS! @sergioalvz_ Saturday, November 19th Codemotion Madrid 2016