Best day of my life – when I can drop support for IE6.

Quick prototype can become real app and bad CSS sticks.

Rewrite are costly and can take a lot of time… During rewrite, we don’t wanna block adding new features and fixing bugs.

Establish Style guide to be consistent.

How to name classes?

Be specific: .global-loading-loading > .loading

Namespace: .sidebar-header > .header

Semantic:.important > .red, .main-menu > .menu-wide > .menu.wide

@extend is redefining selectors, which could cause problems in order.

Having duplicated output CSS is not a problem and is worthy developer comfort, it will be GZIPed and on CDN.

Prefix classes, which are used just to hook javascript, eg. js-, mixpanel-, ga- (for google analytics)

CSS @import is making another request, preprocessor @include will compile in one file.

Bad CSS

Too much IDs.

Generic classnames.

Unnecessary verbose.

Inconsistent formatting.

If you have to worry about specificity, your selectors are too specific. Can be avoided by namespaces and good naming conventions.

Refactoring

  • Stop adding bad CSS from

  • Always leave your codebase in better shape you found it.

  • Step by step, refactor small islands.

Learn Regular Expressions for finding in your project, good and specific naming helps.