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
200
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
Design Foundational Data Engineering Observability
Avatar for suci sucitw
3
180
コンテキストエンジニアリング Cursor編
Avatar for kinopee kinopeee
1
760
Testing Trophyは叫ばない
Avatar for toms toms74209200
0
770
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
3
1.4k
速いWebフレームワークを作る
Avatar for Yusuke Wada yusukebe
5
1.7k
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
Avatar for Wataru Takahara mipypf
0
1.1k
テストカバレッジ100%を10年続けて得られた学びと品質
Avatar for もっち mottyzzz
2
500
AIエージェント開発、DevOps and LLMOps
Avatar for Kento.Yamada ymd65536
1
380
Tool Catalog Agent for Bedrock AgentCore Gateway
Avatar for matsukada licux
6
2.1k
TDD 実践ミニトーク
Avatar for Daisuke Garaike contour_gara
1
290
オープンセミナー2025 @広島 LT 技術ブログを続けるには
Avatar for Satoshi Kaneyasu satoshi256kbyte
0
180
TanStack DB ~状態管理の新しい考え方~
Avatar for じょうげん bmthd
2
490

Featured

See All Featured
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
273
40k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
111
20k
The Cost Of JavaScript in 2023
Avatar for Addy Osmani addyosmani
53
8.9k
Fight the Zombie Pattern Library - RWD Summit 2016
Avatar for Marcelo Somers marcelosomers
234
17k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.8k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
347
40k
Music & Morning Musume
Avatar for Bryan Veloso bryan
46
6.8k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
71
11k
Done Done
Avatar for chrislema chrislema
185
16k
Become a Pro
Avatar for Speaker Deck speakerdeck
PRO
29
5.5k

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?