CSS Systems

WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 1

WRITING MAINTAINABLE CSS Natalie Downe | Barcamp London 5 28th September 2008 2

CSS SYSTEMS Natalie Downe | Barcamp London 5 28th September 2008 3

I am an optimist 4

so I am going to assume that 5

you already write beautiful and valid markup 6

you use semantic markup & class / id names 7

you separate content, presentation & behavior 8

because you care 9

Maintainability in CSS? 10

It’s not a solved problem. 11

It’s not just about the future 12

It’s about now 13

CLEARLEFT High quality code To tight deadlines For handover to external developers 14

CSS SYSTEMS 15

A CSS SYSTEM IS... a top down approach personalised for an individual site a reusable set of markup patterns and CSS looking at the overall stucture and individual components glossary of shared vocabulary for developers 16

ORDERING Rule blocks are loosely ordered by speciﬁcity, Elements, grouped by type of tag Classes, grouped by the effect they create IDs, grouped by the component they affect 17

GROUPING general styles body styles reset links headings other elements, tags helper styles forms notiﬁcations and errors consistant items with normally just one class page structure skeleton including page furniture, page components most of your styles will be in here overrides 18

GROUPING general styles body styles reset links headings other elements, tags helper styles forms notiﬁcations and errors consistant items with normally just one class page structure skeleton including page furniture, page components most of your styles will be in here overrides 19

CSS Edit macrabbit.com/cssedit 20

CSS Edit macrabbit.com/cssedit 21

CONDITIONAL COMMENTS Never use browser hacks Browser speciﬁc stylesheets for all versions of IE and another for IE6 and under If you have to entirely re-engineer for IE, overriding your standards ready CSS in a conditional comment, you’re Doing It Wrong 22

please look to my right for a moment 23

please look to my right for a moment 24

BEFORE YOU START So I have a design ... what now? 25

look at the basics 26

will it be liquid? elastic? or ﬁxed? 27

MAINTAINABLE LAYOUT if you are using an em or ﬁxed width layout, try to only set a width on the container, using percentages inside a max-width of 100% will stop your layout creeping out the side of the viewport up and down font size all the time be afraid of heights, vertigo is healthy on the web. NEVER use height in px on anything with text inside 28

the grid 30

draw diagrams 31

lots of diagrams 32

make calculations 33

get inventive 34

levels of headings 35

page structure and components 37

MAINTAINABILITY MYTHS Any existing ‘best practices’ or approaches? 41

CSS frameworks 42

Single line declaration blocks 43

Selector based indentation 44

colour.css / layout.css / typography.css 45

ON YOUR MARKS ... You have your design and your plan - you’re all set! 46

use the cascade 47

div#page div.teaser ul.products li p.name 48

ul.products p.name 49

you love to ﬂoat 50

shorthand? 51

p { font: 12px/14px sans-serif } p { font: 80% sans-serif } p { font: x-large/110% quot;New Century Schoolbookquot;, serif } p { font: bold italic large Palatino, serif } p { font: normal small-caps 120%/120% fantasy } 52

background: url(quot;w00t.pngquot;) orange 0 50% repeat ﬁxed; 54

background: lime; 55

background: url(quot;roﬂ.gifquot;); 56

background-color: lime; background-image: url(quot;roﬂ.pngquot;); 57

PREPARE FOR THE WORST n00bs will one day be let loose on your code (accept it) 58

clear your footer 59

careful with dimensions 60

watch your height 61

hooks 62

editable content 63

sanitise text 64

abstract your icons 65

DESIGN TO AVOID DEBUGGING engineer your way around the browser 66

Simultaneously develop 67

dont re-engineer seperate solutions 68

ﬂoating 69

you need to set psuedo selectors on links 70

buttons 71

review 72

HANDOVER what to give the client 73

THE IDEAL HANDOVER INCLUDES The markup scheme, a set of ﬁles demonstrating the different markup components The CSS itself Supporting documents that explain the system as clearly as possible A face to face meeting if possible 74

FINALLY 75

ITS ALL ABOUT THE SYSTEM deﬁne it develop it maintain it communicate it 76

THANK YOU 77

http://natbat.net	17698
http://woorkup.com	3612
http://ajaxian.com	3151
http://lanyrd.com	2173
http://www.cssnolanche.com.br	1243
http://www.candesprojects.com	433
http://higher.com.ua	409
http://blog.zog.org	378
http://css9.net	280
http://www.barbarosalp.com	209
http://juandedioz.blogspot.com	198
http://www.elholgazan.com	179
http://internetanddesign.com	175
http://www.bobd.cn	168
http://www.chinaz.com	167
http://variable3.com	144
http://kratce.vzhurudolu.cz	97
http://createordie.de	97
http://trend21c.tistory.com	84
http://www.slideshare.net	82
http://east08.webdirections.org	79
http://webprogramming.tistory.com	71
http://sicross.blogspot.com	68
http://www.red91.com	60
http://usabilita.blogosfere.it	59
http://blog.maxincube.com	56
http://www.2hjob.com	51
http://www.ilovejs.net	41
http://vishalkinikar.com	39
http://vanilladesign.ru	38
http://www.giuseppebeghelli.it	36
http://css.injun.ru	36
http://blog.solucionex.com	34
http://www.webjx.com	33
http://blog.schaufler.ch	29
http://entwickler.com	29
http://fabiancouto.wordpress.com	28
http://littleprince.dyndns.org	27
http://webcache.googleusercontent.com	26
http://www.bertrandkeller.info	25
http://translate.googleusercontent.com	23
http://barbarosalp.com	22
http://bertrandkeller.info	20
http://www.hanrss.com	20
http://feeds.feedburner.com	19
http://www.diegofranciosi.com	19
http://www.cnblogs.com	19
http://zekefranco.com	16
http://www.colordeu.es	16
http://extjs.com	16
http://blog.fengyiyi.com	12

CSS Systems

by Natalie Downe on Sep 28, 2008

Accessibility

Categories

Tags

Upload Details

Usage Rights

179 Embeds 32,342

Statistics

CSS Systems — Presentation Transcript