Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Breaking Good Habits
Harry Roberts
February 12, 2012
Design
22
5k
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
Get Your Head Straight
csswizardry
8
8.4k
From Milliseconds to Millions: A Look at the Numbers Powering Web Performance
csswizardry
1
1.6k
More Than You Ever Wanted to Know About Resource Hints
csswizardry
6
7.1k
It’s My (Third) Party, and I’ll Cry if I Want To
csswizardry
13
4.5k
FaCSSt: CSS & Performance
csswizardry
26
3.1k
Vim for Front-end Developers
csswizardry
12
5.5k
Why Fast Matters
csswizardry
24
7.3k
Refactoring CSS Without Losing Your Mind
csswizardry
118
45k
A Rather Peculiar Journey
csswizardry
10
2.2k
Other Decks in Design
See All in Design
A_Yajima
a_yajima
1
4.6k
Nel: A Limbo Odessy
educe_art
0
150
デザインスプリントの組織導入と活用について
transit_kix
3
1.4k
ANTIEK
8sided
PRO
1
130
FULLPAGEJUNGLECHASE.pdf
anran99
2
420
ujeza_final.pdf
ujki
0
680
Episode 2 Onyx Monster Mysteries part 2
ivettetwin
1
230
2021年度進級制作展プレゼンスライド
nagi_1073
0
190
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
visional_design
2
2.3k
株式会社gaz - 会社案内
gazinc
2
6.2k
「SPACE DESIGN × DX」 - 店舗・オフィス等の空間DX伴⾛⽀援 -
pointedge
0
290
Cat Beast
hbosnian
1
270
Featured
See All Featured
Navigating Team Friction
lara
175
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
7
1k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
119
28k
Building Flexible Design Systems
yeseniaperezcruz
310
33k
Bash Introduction
62gerente
596
210k
Faster Mobile Websites
deanohume
294
28k
Art Directing for the Web. Five minutes with CSS Template Areas
malarkey
196
9.4k
Robots, Beer and Maslow
schacon
152
7.1k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
350
21k
Adopting Sorbet at Scale
ufuk
63
7.5k
Building Your Own Lightsaber
phodgson
94
4.6k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
103
16k
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