Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
CSS FTW

#CSS FTW My way to face the challenge: Maintainable + Efficient + Optimized

##General

  • YSlow + Page Speed (Performance Rules)…
  • CSSLint Rules…
  • Don’t use too many web fonts talk to your designer, and explain the impact of loading many sources.

##Tools

##BAD or GOOD?

#####Why not, one new class for a group? BAD

.soccer { background: #ccc; color: #f00; border-radius: 5px; }

.surf { background: #ccc; color: #ff0; border-radius: 5px; }

GOOD

.sport { background: #ccc; border-radius: 5px; }

.sport-soccer { color: #f00; }

.sport-surf { color: #ff0; }

…then, you must have only one reference for the same sprite

.flag { background:url(sprite.png) 0 0 no-repeat; }

.flag-brazil { background-position: -16px 0px; }

.flag-usa { background-position: -32px 0px; }

We're working on Pitomba Sprite Generator

#####Avoid universal selector * { margin:0; padding: 0; } BAD

YUI CSS Reset GOOD

#####Avoid thousand classes for a selector .namespace .header .description .link {} BAD

.namespace .header-description-link { } GOOD

#####Avoid implicit universal selector .checkbox[checked="true"] {} BAD

.checkbox-checked { } GOOD

#####Don't tag qualifying nav.navigation { } BAD

.navigation { } GOOD

#####Don't use IDs in selectors, ID impact specificity and can't be reused #generic-widget { } BAD

.generic-widget { } GOOD

#####Removing Zero values .widget { margin: 0px; } BAD

.widget { margin: 0; } GOOD

####Any help, contribution is welcome...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment