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

Maintainable CSS

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

Maintainable CSS

Introduction to BEM

Avatar for Juanda Zapata

Juanda Zapata

March 30, 2016

More Decks by Juanda Zapata

See All by Juanda Zapata
Principles of Visual Design
Avatar for Juanda Zapata juanzuluaga
0
81
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
180
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
340
UI Fundamentals for Programmers
Avatar for Juanda Zapata juanzuluaga
0
290
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
400
Programming in paradise
Avatar for Juanda Zapata juanzuluaga
1
150
Intro to Ruby
Avatar for Juanda Zapata juanzuluaga
1
700

Other Decks in Programming

See All in Programming
「つくるAI」だけではバグは見つからない　～テストに必要な「見つけるAI」を分離させる戦略～
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
0
130
jsmini JavaScript Engine を作ってみた話
Avatar for Yosuke Furukawa yosuke_furukawa
PRO
0
350
自動化したのに回らないテスト運用の壁ーAI時代の品質責任と生産性
Avatar for Masahiko Funaki(舟木 将彦) mfunaki
1
150
typoなんかねぇよ
Avatar for らすぴー raspython3
0
230
How I Won Prize Money at a Hackathon Using Codex and Symphony Alpha
Avatar for yasei no otoko yasei_no_otoko
0
120
in-process GraphQL のすすめ #ginzajs
Avatar for izumin5210 izumin5210
4
1.4k
関東Kaggler会_NVIDIA_Nemotron_コンペ_振り返り
Avatar for rick rick_ds
0
680
AIを紡ぐPMのお話
Avatar for swdtkuy swdtkuy
0
120
AWS DevOps AgentのAzure接続機能を検証して見えた活用法／Use Cases Verified for the AWS DevOps Agent's Azure Connectivity Feature
Avatar for モブエンジニア（Masaki Okuda） masakiokuda
1
260
言葉の格闘技のススメ～紙とペンと言葉から始める、キャリアの描き方～
Avatar for 進捗ゼミ progresscicada
2
170
レビュー履歴をAIに食わせて、 Compose移行を加速するs
Avatar for Yuki Shiho shihochan
0
170
FastAPI の並行処理モデルを完全に理解する
Avatar for Yuki Ishikawa hoto17296
6
2.3k

Featured

See All Featured
Abbi's Birthday
Avatar for Violet Bock coloredviolet
3
9.4k
Deep Space Network (abreviated)
Avatar for Tony Rice tonyrice
0
260
Marketing Yourself as an Engineer | Alaka | Gurzu
Avatar for Gurzu gurzu
0
280
Getting science done with accelerated Python computing platforms
Avatar for Jacob Tomlinson jacobtomlinson
2
440
Color Theory Basics | Prateek | Gurzu
Avatar for Gurzu gurzu
0
430
Build The Right Thing And Hit Your Dates
Avatar for Maggie C. maggiecrowley
39
3.4k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
Avatar for Aleyda Solis aleyda
1
1.3k
[SF Ruby Conf 2025] Rails X
Avatar for Vladimir Dementyev palkan
2
1.3k
Heart Work Chapter 1 - Part 1
Avatar for Lake Fama lfama
PRO
8
36k
Agile Actions for Facilitating Distributed Teams - ADO2019
Avatar for Mark Kilby mkilby
0
260
技術選定の審美眼（2025年版） / Understanding the Spiral of Technologies 2025 edition
Avatar for Takuto WADA twada
PRO
120
120k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
55
10k

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?