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
180
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
130
Frontend Tooling @ Madison+ UX 2014
ethanmuller
1
58
Other Decks in Design
See All in Design
Jeremy's First Day
myates3
1
130
デザインテクノロジストが先導する プロダクト開発の世界
degudegu2510
1
370
フロントエンドエンジニアが知っておくべきUIUX心理学
yukiringo
1
300
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
420
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
180
業務システムのUX/UI設計ノウハウを解説。デザイナー不在で失敗しないために身につけるべき基本とは?
ncdc
2
320
20240120_画像生成AI_NovelAI入門・情報収集
doradora09
0
120
B/43プラスカードができるまで
putchomsmartbank
0
490
TrollsTopia: Funtography- Part 1
kenijam
1
220
丸井グループが取り組むエンタープライズアジャイルと プロダクトマネージャーの役割
muture
0
210
文化に寄りそうデザイン
recruitengineers
PRO
4
920
The Fight
euralisw
0
120
Featured
See All Featured
How GitHub Uses GitHub to Build GitHub
holman
468
290k
In The Pink: A Labor of Love
frogandcode
138
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
14
1.5k
Being A Developer After 40
akosma
66
580k
Happy Clients
brianwarren
92
6.4k
Writing Fast Ruby
sferik
622
60k
Rails Girls Zürich Keynote
gr2m
91
13k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
Designing on Purpose - Digital PM Summit 2013
jponch
111
6.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
7
3.4k
Six Lessons from altMBA
skipperchong
22
3k
The Brand Is Dead. Long Live the Brand.
mthomps
49
29k
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]