CSS Best practice - sammanställning

Jag söker tips om css. Mycket vet jag redan och har läst förut, men här följer några saker som jag tycker är viktigt att komma ihåg/inte glömma bort.

Organize the Stylesheet with a Top-down Structure

1. Generic classes (body, a, p, h1, etc.)

1. #header

1. #nav-menu

1. #main-content

Combine Elements

Use Multiple Classes
<div class="box right"></div>

Use Shorthand

margin: 8px 7px 0px 5px;

Alphabetize your Properties

Say no more...

Avoid Extra Selectors

body #container .someclass ul li {....}  ->  .someclass li {...}

Tipsen ovan är hämtade från Beginners 30 CSS Best Practices for 

Validate

Använd W3C’s free CSS validator.

Keep a Template Library

Use Useful Naming Conventions

Better Web Typography with @font-face

Lägg önskad font på servern, deklarera sedan mha font-family.

@font-face { font-family: CurlzMTRegular; src: url(fonts/CurlzMTRegular.eot);}

Sprites

CSS Hacks för ie
Läs mer på http://www.webdevout.net/css-hacks.

Reset CSS

För att slippa att element som inte stilsatts beter sig olika i olika webbläsare.

html,body,iv,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup, tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td { margin:0; padding:0; border:0; outline:0; font-weight:inherit; font-style:inherit; font-size:100%; font-family:inherit; vertical-align:baseline; }:focus { outline:0; }body { line-height:1; color:#000; background:#fff; }ol,ul { list-style:none; } table { border-collapse:separate; border-spacing:0; }caption,th,td { text-align:left; font-weight:normal; } 

Tipsen ovan är hämtade från 10 Best CSS Practices to Improve Your Code

Använd fler css-filer

Use Prefixr

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just develop your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you.

Fler tips om line-height, margin mm för ett bra flow finns på CSS Typography.

Sprites

Combining all background images into one single image and displaying them using background positions is all we call CSS Sprites.

Hämtat från 15 Best CSS Practices to Make Your Life Easier

Multipla CSS-filer

En för grund-stil och fler för sid eller webbplats-specifika inställningar.

One of the easiest ways to deal with all the cross-browser vendor weirdness is to use a handy little tool called Prefixr. With Prefixr, you just develop your code as always, and you could just use a single vendor prefix (for example, only “-moz-”) for all your CSS3. Then, when you’re done testing in that one browser and have everything working the way you want, just throw your code into Prefixr and it will generate all the extra vendor code for you.