Wednesday, July 27, 2011

WISH

Wednesday, July 27, 2011

CSS

TOOLS

DUPLICATION The single largest performance bottleneck for CSS

http://www.flickr.com/photos/widget8/4121151605/sizes/l/in/photostream/ Wednesday, July 27, 2011

AVOID WEBSITE CANCER

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/ Wednesday, July 27, 2011

YUMMY > @Stubbornella 14 minutes ago


4 LINES OF CSS...

_



HTML SIZE reduced by 50%

by Stefan Parker Wednesday, July 27, 2011

“Due to these efforts, we cut our average CSS bytes per page by 19% (after gzip) and HTML bytes per page by 44% (before gzip).”

Jason Sobel http://www.facebook.com/note.php?note_id=307069903919 Wednesday, July 27, 2011

GET THE MEDIA BLOCK: https://github.com/stubbornella/oocss/tree/master/core/media


PREPROCESSORS server-side CSS language additions


GRADIENT TOOLS make converting sites to CSS3 so much faster


by Lea Verou Wednesday, July 27, 2011

but the syntax is very very ugly, and unstable





COLORZILLA TOOL http://www.colorzilla.com/gradient-editor/


VALIDATOR rockin’ the css tools old school


VALIDATE VIA URL or file upload Wednesday, July 27, 2011

OPTIONS but, defaults are a good start Wednesday, July 27, 2011

OUTPUT NOT FRIENDLY doesn’t recover well, so fix errors in order Wednesday, July 27, 2011

.foo{ *background-color:red; }

SOME SILLY THINGS validator pukes out its guts when it finds common css hacks Wednesday, July 27, 2011

.foo{ padding:5px; }

NOT VERY SMART Declare padding 3,668 times, the validator doesn’t find that error. Wednesday, July 27, 2011

CSS LINT beyond validation


THE FLAVOR OF DUPLICATION Find yours and you’ll find your solution.

http://www.flickr.com/photos/the_justified_sinner/4694158195/sizes/l/in/photostream/ Wednesday, July 27, 2011


CHOOSE THE RULES RELEVANT TO YOU Our goal is to allow custom rulesets, for example, the Salesforce.com custom rules, or special rules for your blog Wednesday, July 27, 2011

OUTPUT searchable, sortable Wednesday, July 27, 2011

ERRORS HIGHLIGHTED IN CONTEXT In this case, don’t use !important Wednesday, July 27, 2011

MAKE UP YOUR OWN RULES!


EASIER THAN YOU THINK! 1. Download source from: github.com/stubbornella/csslint 2. Find a rule that does something similar to what you want to do. e.g. the rule tests for a property value pair and you want to test for a different property and value 3. Copy! Seriously. Wednesday, July 27, 2011

TEXT-INDENT EXAMPLE Name the rule, and give it an id

Add the rule to CSS Lint

Describe the rule Tell CSS Lint which browsers are affected.


TEXT-INDENT EXAMPLE

Make the rule listen to the parts of the stylesheet you care about. In this case, properties. Wednesday, July 27, 2011

Try: • startstylesheet, • endstylesheet, • startrule, • endrule, etc

TEXT-INDENT EXAMPLE

Get the property


And the value

TEXT-INDENT EXAMPLE Test if the property is text-indent

If text indent is being used to hide text, send the reporter a message that it may fail in RTL languages.


And the value is less than -99

TEXT-INDENT EXAMPLE

Make sure to tell CSS Lint the line, column, and rule so the user can find their error. Wednesday, July 27, 2011

WRITE TESTS FOR YOUR TEST ;) Give CSS Lint some CSS to test

This helps everyone work together. Wednesday, July 27, 2011

Tell us how many errors are in that CSS.

USE CSS LINT TO TEST FOR DUPLICATION • floats • headings • font-sizes • color

values coming soon!

• padding


& margins coming soon!

LET’S KEEP TALKING... http://stubbornella.org @stubbornella

http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-css
