Best CSS practice and general coding

Question

I'm looking to code a website (I'm new to it) and was wondering what the best practice would be for my CSS (I'm using CSS3 and HTML5) ?

I'm looking to reach best performances on my website and increase visitors browsing experience / satisfaction. Originally a sysadmin, I have set up a webserver running Nginx + Google PageSpeed module which gives me very good results on metrix's but I want to go beyond that.

So Iwas wondering :

I have 6 pages, every page has a generic "css base" for header, body, footer etc... But every page has it's own purpose and "content layout" : blog, articles, gallery...

Therefore, do you think I should :

1. Create a different .css file for every page ? > like index.css; page1.css

2. Create a different .css file for every screen size ?

3. Or simply do like most webdevs combine all and minify duncareaboutperfs.min.css ?

Thanks in advance helping me out !

Answer 1

A little feedback, I finally got a betyter clue on how to deal with CSS. The best practice is to inline the small css and put rest in one single file to avoid multiple HTTP requests.

I came through a nice article describing how to detect all CSS above the fold and how to defere parsing of CSS.

If you are interested in, please take a look at this page : http://www.appneta.com/blog/bootstrap-pagespeed/

Thanks everyone

Answer 2

It's a great question, one with many answers. In my experience, under most circumstances, it's best to combine css in one file (single download cached), and let Nginx or Apache do the compression.

Minifying only reduces css by a few %, at the cost of readable code. If you are not likely to revise CSS after going live, or if you are willing to be extra careful with revision control, then go for it.

Also, from your description, I would highly recommend using a CSS framework such as Skeleton ... http://www.getskeleton.com ... which contains all the right resets and "responsive layout" techniques that make coding websites a pleasure.