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
83

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
240
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
15年続くIoTサービスの SREエンジニアが挑む 分散トレーシング導入
Avatar for Melonps melonps
2
190
SourceGeneratorのススメ
Avatar for tkym htkym
0
190
Rust 製のコードエディタ “Zed” を使ってみた
Avatar for NearMeの技術発表資料です nearme_tech
PRO
0
160
インターン生でもAuth0で 認証基盤刷新が出来るのか
Avatar for takumi taku271
0
190
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
200
ぼくの開発環境2026
Avatar for yuzneri yuzneri
0
190
16年目のピクシブ百科事典を支える最新の技術基盤 / The Modern Tech Stack Powering Pixiv Encyclopedia in its 16th Year
Avatar for ahu ahuglajbclajep
5
1k
Implementation Patterns
Avatar for Denys Poltorak denyspoltorak
0
280
今こそ知るべき耐量子計算機暗号(PQC)入門 / PQC: What You Need to Know Now
Avatar for mackey0225 mackey0225
3
370
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
Unicodeどうしてる？ PHPから見たUnicode対応と他言語での対応についてのお伺い
Avatar for てきめん tekimen youkidearitai
PRO
1
2.5k
CSC307 Lecture 07
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
550

Featured

See All Featured
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
Avatar for Kenny Baas-Schwegler baasie
0
450
Ethics towards AI in product and experience design
Avatar for Skipper Chong Warson skipperchong
2
190
The Limits of Empathy - UXLibs8
Avatar for Cassini Nazir cassininazir
1
210
Paper Plane
Avatar for Katie Cordina Lindsey katiecoart
PRO
0
46k
Effective software design: The role of men in debugging patriarchy in IT @ Voxxed Days AMS
Avatar for Kenny Baas-Schwegler baasie
0
220
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
31
9.9k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
110
brightonSEO & MeasureFest 2025 - Christian Goodrich - Winning strategies for Black Friday CRO & PPC
Avatar for Christian Goodrich cargoodrich
3
98
WCS-LA-2024
Avatar for Leonardo Collado-Torres lcolladotor
0
450
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
33
1.5k
Designing Experiences People Love
Avatar for Jonathan Moore moore
144
24k

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?