CSS Audits
@susanjrobertson susanjeanrobertson.com
Take back control of your CSS
Me
Developer @ Writer @
&
Old Application, layers
https://flic.kr/p/4xVXxH
Admitting there is a problem
Wrangling for time
https://flic.kr/p/8J6XML
Cleaning == deleting
Remember, you have version control to find things again :)
Standardize code
Decide about the best ways to write code going forward and
DOCUMENT IT!
Reduce files
Elimination of ~200 lines of code
Increase performance
https://flic.kr/p/FpnZC
Familiarize yourself with code base
CSS Dig http://cssdig.com
StyleStats http://www.stylestats.org
CSS Lint
http://csslint.net
Type-o-matic
http://type-o-matic.net
Grep
http://www.cyberciti.biz/faq/howto-use-grep-command-in-linux-unix/
CSS Colorguard
https://github.com/SlexAxton/css-colorguard
Dust-me Selectors
https://addons.mozilla.org/en-US/firefox/addon/dust-me-selectors/
Visual Inventory
http://bradfrost.com/blog/post/interface-inventory/
Depth of Applicability
https://smacss.com/book/applicability
Specificity issues
.orderdetail_wrap .dapth_wrap .dapth_data .shopping_cart .checkout_orderdetail_table .item_price_box
Tighten code
How modular is it? Consolidation?
Preprocessors
Mixins/Extends/Placeholders
Nesting
Output
Coding Philosophy
OOCSS SMACSS
BEM
Deviations
Document why you may stray
Write up
Outlines are fine
Give reasons
Good explanation
Explanation of reasons
Order the recommendations
Small pieces that can be done?
• Navigation • Blog post • News section
If major, are there sections?
• Basket and Checkout • Product pages
Markup may need to change
Style guide or standards?
Document your CSS
Comments?
Spaces or tabs?Empty lines between rule set?
Space between property and value?
Is nesting OK at all, if so how deep?
Break up CSS into one style sheet per module or not?
Build process if using a preprocessor?
Do you commit and track generated files?
Where will docs live?
Easily accessible & convenient for entire team
Best online, either privately or publicly
How will it maintained?
• Schedule when to go back to audit & review • Base schedule on the rate of your
application changing. • Monthly, Quarterly, Yearly?
Time estimate
Imagine you could devote time to just this? How long would it take? By section or the entire thing?
Hand off or get to work!
How was my app better?
FiftyThree Type Audit
http://www.fiftythree.com/styleguide/typography
Cleaned up/better understood
https://github.com/Editorially/styleguide
BONUS POINTS for documentation that helps people understand you code base quickly.
Thank youA note of thanks to Ethan Marcotte, Rob Brackett, Jason Grigsby, Max Fenton and
Jonathan Snook for early feedback on this talk.
Also, thanks to Flickr users and their creative commons photos.
@susanjrobertson susanjeanrobertson.com