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
You can’t perform that action at this time.