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
High-Level Programming Languages in AI Era -Human Thought and Mind-
hayat01sh1da
PRO
0
780
Hack Claude Code with Claude Code
choplin
4
2.1k
PicoRuby on Rails
makicamel
2
130
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
Deep Dive into ~/.claude/projects
hiragram
14
2.6k
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
「Cursor/Devin全社導入の理想と現実」のその後
saitoryc
0
820
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
220
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
190
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
250
効率的な開発手段として VRTを活用する
ishkawa
0
140
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.3k
Balancing Empowerment & Direction
lara
1
430
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Building Adaptive Systems
keathley
43
2.7k
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