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
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
200
Saudade typeface
tiagoporto
0
320
Starry | Storyboards | Scene 1-21
giofortuna_story
0
280
クライアントワークにおける UXリサーチの実践
kozotaira
0
680
Design Studio Deck | インクルーシブデザインスタジオCULUUM
culumu
3
1.3k
20250129_DAST28_実空間にデジタル資源の接点をデザインする
majimasachi
0
420
Hatena Engineer Seminar #33 チームと開発するためのモック
takuwolog
0
330
CMS管理画面のアクセシビリティ
magi1125
6
1.8k
もうひとつのアーキテクチャ #kichijojipm
kondoyuko
0
240
Tools for Design Engineers other than LLM in the LLM era
takanorip
1
130
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
460
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
670
Featured
See All Featured
Bash Introduction
62gerente
614
210k
Six Lessons from altMBA
skipperchong
28
3.8k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
210
Site-Speed That Sticks
csswizardry
10
660
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
BBQ
matthewcrist
89
9.7k
VelocityConf: Rendering Performance Case Studies
addyosmani
330
24k
GitHub's CSS Performance
jonrohan
1031
460k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
Music & Morning Musume
bryan
46
6.6k
Documentation Writing (for coders)
carmenintech
71
4.9k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
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]