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

CSS Wranglin'

Joe Ellis
March 01, 2013
Technology
6
120

CSS Wranglin'

How to wrangle and organize CSS in a sane way for medium to large applications.

Joe Ellis

March 01, 2013
Tweet

More Decks by Joe Ellis

See All by Joe Ellis
Sass vs Less vs Stylus vs Rework
notjoeellis
3
2.1k
Scalable CSS
notjoeellis
5
350
Barcamp 5 - A Website's Tale
notjoeellis
2
170

Other Decks in Technology

See All in Technology
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
yajihum
2
1k
API Gatewayと少し仲良くなってみた!
masuchoku
0
100
DevOpsDays History and my DevOps story
kawaguti
PRO
9
2.4k
チームでロジカルシンキングに改めて向き合っている話 〜学習環境と実践⽅法〜
sansantech
PRO
2
1.5k
20240416_devopsdaystokyo
kzkmaeda
1
210
プロデザ！ BY リクルート vol.18_リクルートのリサーチ実践組織「リサーチブーストコミュニティ」
recruitengineers
PRO
3
270
AOAI をきっかけに​ 社内の Azure 管理を見直した話​
recruitengineers
PRO
1
250
ChatGPT for IT Service Management (IT Pro)
dahatake
7
1.5k
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.5k
私が trocco を推す理由
__allllllllez__
1
200
Meta Quest 3 で動く桜マシマシ WebXR アプリを IBM Cloud Code Engine と Babylon.js で作った話
1ftseabass
PRO
0
120
検証を通して見えてきたTiDBの性能特性
lycorptech_jp
PRO
6
3.7k

Featured

See All Featured
It's Worth the Effort
3n
180
27k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Pencils Down: Stop Designing & Start Developing
hursman
117
11k
Why Our Code Smells
bkeepers
PRO
331
56k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
19
1.7k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
21
1.6k
Fireside Chat
paigeccino
21
2.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
659
120k
Code Reviewing Like a Champion
maltzj
514
39k
Documentation Writing (for coders)
carmenintech
60
3.9k
Web Components: a chance to create the future
zenorocha
305
41k

Transcript

  1. CSS Wranglin’ Friday, March 1, 13

  2. by Joe Ellis @notjoeellis [email protected] Developer at Audiosocket Friday, March

    1, 13

  3. Disclaimer Friday, March 1, 13

  4. This is for medium to large applications Rules may not

    make sense for small sites. Friday, March 1, 13

  5. YMMV Friday, March 1, 13

  6. Use a CSS precompiler Friday, March 1, 13

  7. File Structure Friday, March 1, 13

  8. Friday, March 1, 13

  9. General Goals Friday, March 1, 13

  10. • Predictable • Reusable • Maintainable • Scalable Good CSS

    is: How to do this? Friday, March 1, 13

  11. Avoid overly specific selectors and parent selectors Friday, March 1,

    13

  12. BAD Friday, March 1, 13

  13. GOOD Friday, March 1, 13

  14. Avoid #IDS Friday, March 1, 13

  15. Avoid overly generic class names Friday, March 1, 13

  16. BAD Friday, March 1, 13

  17. GOOD Friday, March 1, 13

  18. Avoid having classes do too much. Abstract where possible. Friday,

    March 1, 13

  19. BAD Friday, March 1, 13

  20. NOT BAD Friday, March 1, 13

  21. BEST Friday, March 1, 13

  22. Separate CSS styles from JS hooks Friday, March 1, 13

  23. BAD Friday, March 1, 13

  24. GOOD Friday, March 1, 13

  25. Got questions /tips? Friday, March 1, 13

  26. FIN Friday, March 1, 13