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
Google Opalで使える37のライブラリ
Avatar for MIKIO KUBO mickey_kubo
3
150
Devoxx BE - Local Development in the AI Era
Avatar for Kevin Dubois kdubois
0
140
理論と実務のギャップを超える
Avatar for kmuto eycjur
0
180
Six and a half ridiculous things to do with Quarkus
Avatar for Holly Cummins hollycummins
0
210
Developer Joy - The New Paradigm
Avatar for Holly Cummins hollycummins
1
370
TFLintカスタムプラグインで始める Terraformコード品質管理
Avatar for bells17 bells17
2
440
AI 駆動開発におけるコミュニティと AWS CDK の価値
Avatar for Kenji Kono konokenj
5
250
モテるデスク環境
Avatar for mozumasu mozumasu
3
1.3k
その面倒な作業、「Dart」にやらせませんか？ Flutter開発者のための業務効率化
Avatar for YomEngine yordgenome03
1
140
TransformerからMCPまで（現代AIを理解するための羅針盤）
Avatar for MIKIO KUBO mickey_kubo
7
5.3k
Writing Better Go: Lessons from 10 Code Reviews
Avatar for Konrad Reiche konradreiche
3
6.8k
Go言語はstack overflowの夢を見るか？
Avatar for Takuto Nagami logica0419
0
600

Featured

See All Featured
The Illustrated Children's Guide to Kubernetes
Avatar for Chris Short chrisshort
49
51k
Automating Front-end Workflow
Avatar for Addy Osmani addyosmani
1371
200k
Java REST API Framework Comparison - PWX 2021
Avatar for Matt Raible mraible
34
8.9k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
272
21k
RailsConf 2023
Avatar for Aaron Patterson tenderlove
30
1.3k
How GitHub (no longer) Works
Avatar for Zach Holman holman
315
140k
Helping Users Find Their Own Way: Creating Modern Search Experiences
Avatar for Dan Newman danielanewman
30
2.9k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
Avatar for Chris Coyier chriscoyier
508
140k
JavaScript: Past, Present, and Future - NDC Porto 2020
Avatar for David Neal reverentgeek
52
5.7k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.5k
Context Engineering - Making Every Token Count
Avatar for Addy Osmani addyosmani
8
300
Code Review Best Practice
Avatar for Trisha Gee trishagee
72
19k

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?