Let’s admit it, the tools for writing CSS aren’t very advanced. For the most part, the people who write tools don’t know about CSS and the people who know about CSS don’t write tools. Quite a conundrum!
In this session, you’ll learn about good tools that can make development faster and maintenance easier. We’ll also talk a bit about where we can go from here.
What tools do we need as sites are becoming more and more complex? We need to get beyond tools whose primary goal is to avoid hand-coding and realize that, as our techniques for writing CSS become more powerful, our tools can too! Session will include:
* Validators
* Preprocessors
* Finding dead rules
* Linting
* CSS3 gradient tools
* Performance measurement tools
* Unit testing
20. HTML SIZE
reduced by 50%
by Stefan Parker
Friday, November 11, 2011
21. “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
Friday, November 11, 2011
22. GET THE MEDIA BLOCK:
https://github.com/stubbornella/oocss/tree/master/core/media
Friday, November 11, 2011
23. PREPROCESSORS
server-side CSS language additions
Friday, November 11, 2011
52. CSS LINT
beyond validation
Friday, November 11, 2011
53. 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/
Friday, November 11, 2011
55. 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
Friday, November 11, 2011
56. OUTPUT
searchable, sortable
Friday, November 11, 2011
57. ERRORS HIGHLIGHTED
IN CONTEXT
In this case, don’t use !important
Friday, November 11, 2011
58. MAKE UP YOUR OWN
RULES!
Friday, November 11, 2011
59. 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.
Friday, November 11, 2011
60. TEXT-INDENT EXAMPLE
Name the
rule, and give
it an id
Add the rule to Describe the rule
CSS Lint
Tell CSS Lint
which browsers
are affected.
Friday, November 11, 2011
61. TEXT-INDENT EXAMPLE
Make the rule listen to
Try:
the parts of the
• startstylesheet,
stylesheet you care
• endstylesheet,
about. In this case,
• startrule,
properties.
• endrule, etc
Friday, November 11, 2011
62. TEXT-INDENT EXAMPLE
Get the property And the value
Friday, November 11, 2011
63. TEXT-INDENT EXAMPLE
Test if the property is And the value is
text-indent less than -99
If text indent is being used to hide text,
send the reporter a message that it may
fail in RTL languages.
Friday, November 11, 2011
64. TEXT-INDENT EXAMPLE
Make sure to tell CSS Lint the
line, column, and rule so the
user can find their error.
Friday, November 11, 2011
65. WRITE TESTS FOR YOUR
TEST ;)
Give CSS Lint some CSS
to test
Tell us how many
errors are in that
This helps everyone work
CSS.
together.
Friday, November 11, 2011
66. USE CSS LINT TO TEST FOR
DUPLICATION
• floats
• headings
• font-sizes
• color values coming soon!
• padding & margins coming soon!
Friday, November 11, 2011
67. BUILD AND SHARE TOOLS
THAT YOU WANT TO EXIST!
you’ll learn so much from open source.
Friday, November 11, 2011