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

Maintainable CSS

Avatar for Juanda Zapata Juanda Zapata
March 30, 2016
Programming
86
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
79
Adapter Pattern
Avatar for Juanda Zapata juanzuluaga
0
170
Elixir 101 - The Erlang VM
Avatar for Juanda Zapata juanzuluaga
5
340
UI Fundamentals for Programmers
Avatar for Juanda Zapata juanzuluaga
0
280
UI fundamentals for programmers
Avatar for Juanda Zapata juanzuluaga
0
400
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
OSもどきOS
Avatar for Sora Arakawa arkw
0
560
Make SRE Operations Easier with Azure SRE Agent
Avatar for KAMEGAWA Kazushi kkamegawa
0
6.1k
技術記事、 専門家としてのプログラマ、 言語化
Avatar for Koutarou Chikuba mizchi
13
6k
[2026年度第1回ORセミナー] 計画最適化ベンチャーと競技プログラミング人材
Avatar for terry-u16 terryu16
0
260
メソッドのジェネリクスでGoの夢は広がるか？ / Kyoto.go #65
Avatar for utagawa kiki utgwkk
3
770
net-httpのHTTP/2対応について
Avatar for NARUSE, Yui naruse
0
480
ローカルLLMを使ってB2Bサービスを作っていての学び
Avatar for Hiroshige Umino yaotti
0
170
ユニットテストの先へ：テスト技法で要求・仕様を整理するJava開発実践 / Beyond_Unit_Testing_Practical_Java_Development_Techniques_for_Organizing_Requirements_and_Specifications
Avatar for SHIMANE, Yoshikazu shimashima35
0
400
生成AI時代にこそ効くGo | Why Go Works in the Age of Generative AI
Avatar for mom0tomo mom0tomo
8
3.2k
Technical Debt: Understanding it Rightly, Engaging it Rightly #LaravelLiveJP
Avatar for shogogg shogogg
0
230
Java × distroless で 軽量なコンテナイメージを / Java on Distroless
Avatar for Daisuke Garaike contour_gara
0
540
TAKTでAI駆動開発の品質を設計する
Avatar for かとじゅん j5ik2o
7
1.3k

Featured

See All Featured
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
What the history of the web can teach us about the future of AI
Avatar for Ines Montani inesmontani
PRO
1
610
GitHub's CSS Performance
Avatar for Jon Rohan jonrohan
1033
470k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.8k
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
Avatar for Andy Polaine apolaine
1
350
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
45
9.1k
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
160
The browser strikes back
Avatar for Jono Alderson jonoalderson
0
1.2k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
140
職位にかかわらず全員がリーダーシップを発揮するチーム作り / Building a team where everyone can demonstrate leadership regardless of position
Avatar for MADOX madoxten
62
54k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
413
23k
How to make the Groovebox
Avatar for あそなす asonas
2
2.2k

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?