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
180

Other Decks in Technology

See All in Technology
複雑なState管理からの脱却
sansantech
PRO
1
140
【令和最新版】AWS Direct Connectと愉快なGWたちのおさらい
minorun365
PRO
5
750
いざ、BSC討伐の旅
nikinusu
2
780
ISUCONに強くなるかもしれない日々の過ごしかた/Findy ISUCON 2024-11-14
fujiwara3
8
870
テストコード品質を高めるためにMutation Testingライブラリ・Strykerを実戦導入してみた話
ysknsid25
7
2.6k
B2B SaaS × AI機能開発 〜テナント分離のパターン解説〜 / B2B SaaS x AI function development - Explanation of tenant separation pattern
oztick139
2
220
New Relicを活用したSREの最初のステップ / NRUG OKINAWA VOL.3
isaoshimizu
2
580
Shopifyアプリ開発における Shopifyの機能活用
sonatard
4
250
VideoMamba: State Space Model for Efficient Video Understanding
chou500
0
190
安心してください、日本語使えますよ―Ubuntu日本語Remix提供休止に寄せて― 2024-11-17
nobutomurata
0
980
DMARC 対応の話 - MIXI CTO オフィスアワー #04
bbqallstars
1
160
信頼性に挑む中で拡張できる・得られる１人のスキルセットとは？
ken5scal
2
530

Featured

See All Featured
It's Worth the Effort
3n
183
27k
Statistics for Hackers
jakevdp
796
220k
Designing the Hi-DPI Web
ddemaree
280
34k
A Philosophy of Restraint
colly
203
16k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.5k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Designing for humans not robots
tammielis
250
25k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
A better future with KSS
kneath
238
17k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
42
9.2k
How to Think Like a Performance Engineer
csswizardry
20
1.1k

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