CSS Audits: Take Back Control of your CSS (Susan Robertson)

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 :)

Benefits

Consistency

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

How

Inventory

Tools

CSS Dig http://cssdig.com

StyleStats http://www.stylestats.org

cssstats.com

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/

Read through

Depth of Applicability

https://smacss.com/book/applicability

Specificity issues

.orderdetail_wrap .dapth_wrap .dapth_data .shopping_cart .checkout_orderdetail_table .item_price_box

Review

Tighten code

How modular is it? Consolidation?

Preprocessors

Mixins/Extends/Placeholders

Nesting

Output

Consistency

Coding Philosophy

OOCSS SMACSS

BEM

Deviations

Document why you may stray

Recommend

Write up

Outlines are fine

Give reasons

Good explanation

Explanation of reasons

Make a plan

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

Marriott

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