• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
CSS Systems
 

CSS Systems

on

  • 90,029 views

http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result ...

http://natbat.net/2008/Sep/28/css-systems/ - A CSS System is a reusable set of content-oriented markup patterns and associated CSS created to express a site's individual design. It is the end result of a process that emphasizes up-front planning, loose coupling between CSS and markup, pre-empting browser bugs and overall robustness. It also incorporates a shared vocabulary for developers to communicate the intent of the code. This talk elaborates on this concept, and also describes a number of tricks I use to pre-empt maintainability issues.

Originally presented at BarCamp London 5 in Richmond on the 28th of September 2008.

Statistics

Views

Total Views
90,029
Views on SlideShare
49,546
Embed Views
40,483

Actions

Likes
246
Downloads
2,387
Comments
6

205 Embeds 40,483

http://natbat.net 18676
http://lanyrd.com 6598
http://woorkup.com 3882
http://ajaxian.com 3186
http://www.cssnolanche.com.br 1634
http://blog.zog.org 653
http://www.barbarosalp.com 480
http://higher.com.ua 453
http://www.candesprojects.com 436
http://internetanddesign.com 349
http://blog.natbat.net 332
http://css9.net 311
http://www.chinaz.com 203
http://tumblr.hootsuite.com 203
http://juandedioz.blogspot.com 198
http://www.elholgazan.com 179
http://www.bobd.cn 168
http://variable3.com 144
http://www.2hjob.com 140
http://kratce.vzhurudolu.cz 135
http://trend21c.tistory.com 119
http://createordie.de 104
http://vanilladesign.ru 99
http://www.giuseppebeghelli.it 90
http://east08.webdirections.org 86
http://www.slideshare.net 82
http://blog.maxincube.com 77
http://sicross.blogspot.com 75
http://webprogramming.tistory.com 74
http://blog.solucionex.com 73
http://barbarosalp.com 64
http://usabilita.blogosfere.it 63
http://www.red91.com 61
http://vishalkinikar.com 50
http://fabiancouto.wordpress.com 47
http://reynish.tumblr.com 46
http://www.ilovejs.net 46
http://littleprince.dyndns.org 39
http://www.bertrandkeller.info 37
http://www.webjx.com 37
http://css.injun.ru 36
http://webcache.googleusercontent.com 29
http://entwickler.com 29
http://blog.schaufler.ch 29
http://bertrandkeller.info 28
http://www.diegofranciosi.com 28
http://translate.googleusercontent.com 28
http://zekefranco.com 22
http://www.hanrss.com 21
http://www.cnblogs.com 20
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel

16 of 6 previous next Post a comment

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    CSS Systems CSS Systems Presentation Transcript

    • 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 specificity, 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 notifications 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 notifications 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 specific 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 fixed? 27
    • MAINTAINABLE LAYOUT if you are using an em or fixed 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
    • 29
    • the grid 30
    • draw diagrams 31
    • lots of diagrams 32
    • make calculations 33
    • get inventive 34
    • levels of headings 35
    • 36
    • page structure and components 37
    • 38
    • 39
    • 40
    • 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 float 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
    • 53
    • background: url(quot;w00t.pngquot;) orange 0 50% repeat fixed; 54
    • background: lime; 55
    • background: url(quot;rofl.gifquot;); 56
    • background-color: lime; background-image: url(quot;rofl.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
    • floating 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 files 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 define it develop it maintain it communicate it 76
    • THANK YOU 77
    • ? 78