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
Breaking Good Habits
Search
Harry Roberts
February 12, 2012
Design
22
5.6k
Breaking Good Habits
Talk first given at The Digital Barn (Barnsley, UK) 11 February, 2012.
Harry Roberts
February 12, 2012
Tweet
Share
More Decks by Harry Roberts
See All by Harry Roberts
Site-Speed That Sticks
csswizardry
10
690
How to Think Like a Performance Engineer
csswizardry
25
1.7k
cache rules everything
csswizardry
5
3.4k
My Website Is Slow! Where Do I Start?
csswizardry
5
480
Optimising Largest Contentful Paint
csswizardry
37
3.3k
Get Your Head Straight
csswizardry
15
20k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
2.5k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
9.3k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
5.5k
Other Decks in Design
See All in Design
真・altはつけるだけじゃなくて -alt属性の考察 2025年版-
securecat
5
1.6k
オープンデータを利用して色々なものを作った話
hjmkth
1
120
AI動画生成ガチャ紹介
piyo7
1
130
児童相談所における養育里親委託時の親権者同意に向けたコミュニケーションの実態
trivia
0
480
ブランドパーソナリティ言語化における生成AI活用の実際
h0sa
0
170
1920*1080pxに設定したケース / Google Slide Size Test
arthur1
0
2.9k
The Golden Whitney
ohtristanart
PRO
0
560
Marpで推しCSSスライドを作ろう! / marp-with-favorite-css
fujiemon
0
300
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.2k
[2025.6.30 もがく中堅デザイナー、キャリアの分岐点] なんでもやる系デザイナーのもがきかた
taka_piya
1
1.3k
FigmaのFigmaファイルから学ぶTips & Tricks
hilokifigma
0
470
harutaka Vision Deck
zenkigenforrecruit
0
150
Featured
See All Featured
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
GraphQLとの向き合い方2022年版
quramy
49
14k
Faster Mobile Websites
deanohume
307
31k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
How to Ace a Technical Interview
jacobian
278
23k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
181
54k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.7k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
161
15k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Transcript
None
Breaking Good Habits Harry Roberts—@csswizardry
Harry who?! •Web designer/developer •Senior UI Developer—BSkyB •@csswizardry •csswizardry.com
Necessary explanation of the cheesy, overly- cryptic talk title.
Web standards… •A great idea? Definitely! •Well intentioned? You bet!
•Ambiguous? Sadly :( •Open to interpretation? Unfortunately…
…web standards •Rules? Definitely not!
Best practices •Best for who? •What are we achieving? •What
do we really want to achieve? •Are we always solving the right problems for the right people?
Good habits? •Avoiding classes and IDs •‘Handcrafting’ our CSS •Avoiding
extra markup
Bad habits? •Classitis—using too many classes •Grid systems •Extra markup
•‘Insemantic’ class names
We’ve been solving the wrong problems for the wrong people!
None
The 4 ‘-ility’s •Maintainability •Flexibility •Extensibility •Predictability
Maintainability
Flexibility
body > div:nth-of-type(2) > article:first- child > p:first-child{ font-size:1.2em }
<p>Lorem ipsum dolor sit amet...</p>
Be ?#*@ing explicit!
.intro{ font-size:1.2em; } <p class=intro>Lorem ipsum dolor sit amet...</p>
Specific !== explicit
Extensibility
Extensible •Stop thinking in pages… •…think in components… •…then think
in abstractions.
Predictability
Expect the unexpected Always build like your client’s CMS is
a bulldozer…
None
CSS selectors
IDs •Don’t use IDs in CSS •Ever.
IDs •No advantage over classes. •Waaaaaay overly specific. •Not dissimilar
to !important •Everything you can do with an ID can be done with a class.
Classes •No one uses classes except browsers and other developers
(and microformats). •Classes are neither semantic or insemantic; they’re sensible or insensible.
None
.red .red{ color:red; } <h1>I am a <span class=red>designer</span> and
<span class=red>developer</span></h1>
.red .red{ color:blue; /* WTF */ } <h1>I am a
<span class=red>designer</span> and <span class=red>developer</span></h1>
.brand .brand{ color:#BADA55; /* FTW */ } <h1>I am a
<span class=brand>designer</span> and <span class=brand>developer</span></h1>
None
Objects and abstractions
The media object bit.ly/cCY3Ew
The media object bit.ly/cCY3Ew
The media object bit.ly/cCY3Ew
The media object bit.ly/cCY3Ew
The media object bit.ly/cCY3Ew <div class=media> <img class=img> <p class=body>Lorem
ipsum...</p> </div> .media,.body { overflow:hidden; } .img { float:left; margin-right:20px; } .img img { display:block; }
The media object bit.ly/cCY3Ew <div class=media> <img class=img> <div class=body>
<p>Lorem ipsum...</p> <a href>Read more...</a> </div> </div>
None
Nicole Sullivan @stubbornella
The nav abstraction bit.ly/oD2M9n
.nav{ list-style:none; margin-left:0; } .nav li{ display:inline; } .nav a{
display:inline-block; } The nav abstraction bit.ly/oD2M9n
<ol class="nav breadcrumb">...</ol> .breadcrumb li:before{ content:"» "; } .breadcrumb li:first-child:before{
content:""; } Breadcrumbs…? bit.ly/oD2M9n
The island object bit.ly/oqQ7JJ
The island object bit.ly/oqQ7JJ <div class=island>...</div> .island{ padding:1.5em; } .island
> :last-child{ margin-bottom:0; }
The island object bit.ly/oqQ7JJ <div class="island promo">...</div> .island.promo{ color:#fff; background-color:#C0FFEE;
}
Double stranded heading hierarchy h1,.alpha { font-size:; line-height:; } h2,.beta
{ font-size:; line-height:; } h3,.gamma { font-size:; line-height:; } h4,.delta { font-size:; line-height:; } h5,.epsilon { font-size:; line-height:; } h6,.zeta { font-size:; line-height:; }
Double stranded heading hierarchy <div class=twitter> <h3 class=delta>Recent tweets</h3> ...
</div>
None
Grid systems
None
Abstract layout into its own layer Keep components free of
dimensions
csswizardry.com/fluid-grids
Straighten up! @media(max-width:480px){ .grid{ float:none; clear:both; width:auto; margin:0; } }
None
All together now!
None
None
None
None
None
None
None
None
None
None
Benefits and side- effects •Sites are faster to build… •…more
robust •…more maintainable •…more consistent •…and incidentally more efficient.
Efficiency on the client side •Reused classes are ‘performance freebies’
•Abstractions mean DRYer code; less to download and evaluate •Classes match quicker than descendants
Now what? •Solve problems for the right people. •Keep yourselves
happy and sane. •Learn when enough is enough; cut yourself some slack.
However bad you think it is, there’s always worse…
Breaking Good Habits •Harry Roberts – @csswizardry •csswizardry.com •Nicole Sullivan
– @stubbornella