Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Maintainable CSS

Avatar for Juanda Zapata Juanda Zapata
March 30, 2016
Programming
0
82

Maintainable CSS

Introduction to BEM

Avatar for Juanda Zapata

Juanda Zapata

March 30, 2016
Tweet

More Decks by Juanda Zapata

See All by Juanda Zapata
Principles of Visual Design
Avatar for Juanda Zapata juanzuluaga
0
72
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
170
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
330
UI Fundamentals for Programmers
Avatar for Juanda Zapata juanzuluaga
0
210
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
390
Programming in paradise
Avatar for Juanda Zapata juanzuluaga
1
140
Intro to Ruby
Avatar for Juanda Zapata juanzuluaga
1
700

Other Decks in Programming

See All in Programming
PostgreSQLで手軽にDuckDBを使う！DuckDB&pg_duckdb入門/osk2025-duckdb
Avatar for Takahashi Ikki takahashiikki
1
230
プロダクト開発をAI 1stに変革する〜SaaS is dead時代で生き残るために〜 / AI 1st Product Development
Avatar for Keisuke Kobayashi kobakei
0
440
Learn CPU architecture with Assembly
Avatar for Akio Itaya akkeylab
1
1.3k
Back to the Future: Let me tell you about the ACP protocol
Avatar for Benedikt Terhechte terhechte
0
120
Playwrightはどのようにクロスブラウザをサポートしているのか
Avatar for nus3 yotahada3
7
2.2k
LLMとPlaywright/reg-suitを活用した jQueryリファクタリングの実際
Avatar for kinocoboy kinocoboy2
4
640
そのpreloadは必要？見過ごされたpreloadが技術的負債として爆発した日
Avatar for mugi mugitti9
2
2.5k
Server Less Code More - コードを書かない時代に生きるサーバーレスデザイン / server-less-code-more
Avatar for geeawa gawa
5
1.9k
Repenser les filtres API Platform: une nouvelle syntaxe
Avatar for Vincent Amstoutz vinceamstoutz
2
150
メモリ不足との戦い〜大量データを扱うアプリでの実践例〜
Avatar for ああうえ kwzr
1
640
猫と暮らすネットワークカメラ生活🐈 ~Vision frameworkでペットを愛でよう~ / iOSDC Japan 2025
Avatar for Yutaro Muta yutailang0119
0
210
WebエンジニアがSwiftをブラウザで動かすプレイグラウンドを作ってみた
Avatar for uutan1108 ohmori_yusuke
0
160

Featured

See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.6k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
25k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.8k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
Avatar for Joe Casabona jcasabona
33
2.4k
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
61k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Building Adaptive Systems
Avatar for Chris Keathley keathley
43
2.8k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
40
2.1k
It's Worth the Effort
Avatar for 3n 3n
187
28k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
27k
Fireside Chat
Avatar for paigeccino paigeccino
40
3.7k

Transcript

  1. Maintainable CSS with BEM

  2. a set of conventions

  3. not a library

  4. not a framework

  5. set of conventions

  6. enforce them in code review

  7. not a silver bullet

  8. writing maintainable CSS is HARD

  9. add everything to app.sass

  10. app.sass => 1000 LOC

  11. too hard to find a selector

  12. too easy to overwrite a style

  13. not maintainable

  14. BEM

  15. Block Element Modifier

  16. None
  17. None
  18. None
  19. None
  20. None
  21. None

  22. not easily overwritten by accident

  23. None

  24. ugh that's a lot of typing

  25. None

  26. folder structure

  27. again, not enforced by any script or framework

  28. better to have several small focused files

  29. None
  30. None

  31. use the power of SASS

  32. variables

  33. we can change the whole L&F of an app just

    by modifying one file
  34. None

  35. alternatives

  36. SMACSS https://smacss.com/

  37. Scalable
 Modular Architecture for CSS

  38. Used by TWTBS

  39. Selectors tend to be deeply nested

  40. Hard to customize

  41. It's ok to mix BEM and SMACSS

  42. CSSModules
 http://glenmaddern.com/articles/css-modules

  43. Gaining a lot of steam in the REACT community

  44. It's a step forward over BEM without global namespaces

  45. thanks!

  46. questions?