A FEW LINES OF HTML...
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
Wednesday, July 27, 2011
4 LINES OF CSS...
_
Wednesday, July 27, 2011
Wednesday, July 27, 2011
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
Wednesday, July 27, 2011
PREPROCESSORS server-side CSS language additions
Wednesday, July 27, 2011
GRADIENT TOOLS make converting sites to CSS3 so much faster
Wednesday, July 27, 2011
by Lea Verou Wednesday, July 27, 2011
but the syntax is very very ugly, and unstable
Wednesday, July 27, 2011
Wednesday, July 27, 2011
Wednesday, July 27, 2011
Wednesday, July 27, 2011
COLORZILLA TOOL http://www.colorzilla.com/gradient-editor/
Wednesday, July 27, 2011
VALIDATOR rockin’ the css tools old school
Wednesday, July 27, 2011
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
Wednesday, July 27, 2011
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
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!
Wednesday, July 27, 2011
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.
Wednesday, July 27, 2011
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
Wednesday, July 27, 2011
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.
Wednesday, July 27, 2011
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
Wednesday, July 27, 2011
& margins coming soon!
LET’S KEEP TALKING... http://stubbornella.org @stubbornella
http://github.com/stubbornella/oocss/ http://groups.google.com/group/object-oriented-css
Wednesday, July 27, 2011
