Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Naming CSS Stuff is Really Hard
Search
Ethan Muller
May 20, 2014
Design
1
200
Naming CSS Stuff is Really Hard
Lightning talk for Dayton Clean Coders, 05/25/2014
Ethan Muller
May 20, 2014
Tweet
Share
More Decks by Ethan Muller
See All by Ethan Muller
Classifying Class Names
ethanmuller
2
150
Frontend Tooling @ Madison+ UX 2014
ethanmuller
1
63
Other Decks in Design
See All in Design
Liquid Iron
mcduckyart
1
110
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
shingo2000
1
1.5k
The Spectacular Lies of Maps
axbom
PRO
1
180
株式会社ログラス - 会社説明資料【デザイナー】/ Loglass Designer
loglass2019
1
810
【Firefly Image 4対応版】上手にFireflyにお願いしてウェブデザイン案を出すぞ!
cremacrema
0
1.4k
AI動画生成ガチャ紹介
piyo7
1
150
DC Style Redesign
mcduckyart
0
140
株式会社Muture_ソーシャル推進事業
muture
PRO
0
110
UXデザインはなぜ定着しないのか?
designstudiopartners
0
790
harutaka Vision Deck
zenkigenforrecruit
0
170
文字コントラストを改めて考える / Reevaluating Text Contrast
lycorptech_jp
PRO
0
360
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
560
Featured
See All Featured
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
What's in a price? How to price your products and services
michaelherold
246
12k
How to Ace a Technical Interview
jacobian
278
23k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
710
Build your cross-platform service in a week with App Engine
jlugia
231
18k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.6k
Being A Developer After 40
akosma
90
590k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
760
Gamification - CAS2011
davidbonilla
81
5.4k
The Pragmatic Product Professional
lauravandoore
35
6.8k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
21
1.3k
Transcript
@ethanmuller NAMING CSS STUFF IS REALLY HARD
SECTION 1: NAMING CSS STUFF IS REALLY EASY
<div class=“butts”>lol</div>
There are no rules.
/* help me */
SECTION 2: STRONG LINKS
.class-names are the links between {styles} and <elements>
“This element is styled this way because it is ________”
“This element is styled this way because it is ________”
(insert class name here)
If saying this makes sense, you’ve got a strong link.
None
Strong links make for comprehendible, maintainable code
SECTION 3: THE THREE BIG CATEGORIES
Logical Presentational Content-based
THE THREE BIG CATEGORIES LOGICAL .negative-button! ! .important-heading! ! .subtle-text
THE THREE BIG CATEGORIES LOGICAL ‣ Styles are being applied
for a reason ‣ The best option ‣ Usually not possible
THE THREE BIG CATEGORIES PRESENTATIONAL .big-text! ! .blue-button! ! .round-corners!
! .inset-box
THE THREE BIG CATEGORIES PRESENTATIONAL ‣ Names describe the appearance
of elements ‣ Names are self-describing ‣ Presentation changes require markup changes ‣ Conducive to style reuse
THE THREE BIG CATEGORIES CONTENT-BASED .product-photo! ! .submit-button! ! .contact-name!
! .intro-text
THE THREE BIG CATEGORIES CONTENT-BASED ‣ Names are based on
the content they’re styling ‣ Change presentation without touching markup ‣ Difficult to reuse styles ‣ Lots and lots of names ‣ Requires reading the stylesheet
Experts agree: Logical styles are best.
The problem is, Design ain’t always logical.
Logical Presentational Content-based
Let’s lay down a rule.
RULE-O-THUMB: The larger the project, the worse idea content- based
classes are.
Let’s think of more rules.
THANKS! @ethanmuller
[email protected]