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
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
82
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
310
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
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
9.2k
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
280
re:Inventに行く前に知っておきたい現地参加のノウハウ
Avatar for nokomoro3 nokomoro3
0
280
更なる可用性を求めて、5年間運用したKotlinのアプリケーションをGoでリプレイスする話
Avatar for Kensuke Taguchi ken_tunc
0
410
Agents on Rails - Rails at Scale 2026
Avatar for Irina Nazarova irinanazarova
0
300
FreeBSDでZabbixを動かす
Avatar for kenkino kenkino
0
340
市販E-Readerを乗っ取れ 〜Embedded Swiftで電子ペーパーガジェットを制御する〜
Avatar for Trickart trickart
0
220
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
340
Augmenting AI with the Power of Jakarta EE
Avatar for ivargrimstad ivargrimstad
0
440
[ハンズオン]AIへの指示だけで「五目並べ」を作ってみよう
Avatar for Satoshi Kaneyasu satoshi256kbyte
1
310
Are APIs Still Relevant in the AI Era?
Avatar for Antoine Bluchet soyuka
0
380
テストを司るデーモンに会いに行く 〜隔離した仮想マシンでテストを通すまで〜
Avatar for Hidemune Takahashi h1d3mun3
1
600

Featured

See All Featured
Docker and Python
Avatar for Tania Allard trallard
47
4.2k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
530
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
96
14k
The agentic SEO stack - context over prompts
Avatar for schlessera schlessera
0
950
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
Tips & Tricks on How to Get Your First Job In Tech
Avatar for Honza Javorek honzajavorek
1
780
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
200
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.8k
Bioeconomy Workshop: Dr. Julius Ecuru, Opportunities for a Bioeconomy in West Africa
Avatar for AKADEMIYA2063 akademiya2063
PRO
1
380
How Fast Is Fast Enough? [PerfNow 2025]
Avatar for Tammy Everts tammyeverts
3
910
Reflections from 52 weeks, 52 projects
Avatar for Jefferson Lam jeffersonlam
356
21k
The Spectacular Lies of Maps
Avatar for Per Axbom axbom
PRO
1
1.1k

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?