Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

Maintainable CSS

Avatar for Juanda Zapata Juanda Zapata
March 30, 2016
Programming
89
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
85
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
330
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
410
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
FactoryBotをやめればRSpecは速くなるのか？
Avatar for nissyi yuta_onishi_97
0
1.7k
現場と育てるRailsモデリング 〜Spreadsheetから始めたモデル設計〜
Avatar for siroemk siroemk
2
1.2k
プロジェクトコードをキレイキレイしよう！暗黙的な参照を読み解く静的解析
Avatar for Takuma Osada ostk0069
0
210
Lambda durable functionsでHuman in the Loopを楽に…楽に……
Avatar for Har1101 har1101
2
300
DroidKnights 2026 Android A2UI Jetpack Compose 기반의 안전한 AI UI 렌더링 - 박제창
Avatar for JaiChangPark itsmedreamwalker
1
220
TS 7.0 で baseUrl が使えなくなった今、パスエイリアスをどうするか
Avatar for おおいし bicstone
2
590
まずはコードより業務と向き合う：テーブル解体のためにPdMを呼んだ話
Avatar for さかうぇ sakawe_ee
0
210
Next.js: The final boss of Web Performance
Avatar for Estela Franco guaca
0
400
LLM 101: Exploring LLMs, Starting with Tokens.
Avatar for Leonardo YongUk Kim dalinaum
0
100
動画プレイヤーはなぜカクつくのか 〜Flutterのレンダリングとネイティブの境界を解剖する〜
Avatar for Naruo Yoshiki naruogram
0
330
Herb in Rails 8.2: Your ERB views, now HTML-aware @ Kaigi on Rails 2026, Tokyo, Japan
Avatar for Marco Roth marcoroth
2
420
全ての永続トークンを、生まれる前に消し去りたい！
Avatar for sylph01 sylph01
3
1.7k

Featured

See All Featured
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
82
6.6k
Designing Experiences People Love
Avatar for Jonathan Moore moore
143
24k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.8k
Code Reviewing Like a Champion
Avatar for maltzj maltzj
529
40k
Building the Perfect Custom Keyboard
Avatar for Naoto Takai takai
2
950
Sam Torres - BigQuery for SEOs
Avatar for Tech SEO Connect techseoconnect
PRO
0
610
How to Think Like a Performance Engineer
Avatar for Harry Roberts csswizardry
28
2.9k
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
22k
The untapped power of vector embeddings
Avatar for Frank van Dijk frankvandijk
2
2k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
211
25k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
141
35k
Put a Button on it: Removing Barriers to Going Fast.
Avatar for kastner kastner
60
4.6k

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?