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
プロポーザルのつくり方
〜個人技編〜 / How to come up with proposals
ohbarye
3
180
リンクアンドモチベーション ソフトウェアエンジニア向け紹介資料 / Introduction to Link and Motivation for Software Engineers
lmi
4
290k
いまならこう作りたい AWSコンテナ[本格]入門ハンズオン　〜2024年版 ハンズオンの構想〜
horsewin
9
2.1k
バクラクにおける可観測性向上の取り組み
yuu26
3
430
生成AIとAWS CDKで実現！ 自社ブログレビューの効率化
ymae
2
330
Apple/Google/Amazonの決済システムの違いを踏まえた定期購読課金システムの構築 / abema-billing-system
cyberagentdevelopers
PRO
1
220
来年もre:Invent2024 に行きたいあなたへ - “集中”と“つながり”で楽しむ -
ny7760
0
490
初心者に Vue.js を 教えるには
tsukuha
5
390
[AWS JAPAN 生成AIハッカソン] Dialog の紹介
yoshimi0227
0
150
Gradle: The Build System That Loves To Hate You
aurimas
2
150
AWS CDKでデータリストアの運用、どのように設計する？～Aurora・EFSの実践事例を紹介～/aws-cdk-data-restore-aurora-efs
mhrtech
4
680
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
130

Featured

See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.1k
Facilitating Awesome Meetings
lara
49
6k
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
Gamification - CAS2011
davidbonilla
80
5k
Bash Introduction
62gerente
608
210k
Intergalactic Javascript Robots from Outer Space
tanoku
268
27k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
328
21k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
14
1.9k
Practical Orchestrator
shlominoach
186
10k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
131
33k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
126
18k

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