2

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 !

lujjjh
  • 473
  • 4
  • 9
JackLinkers
  • 325
  • 1
  • 2
  • 13
  • what is `ccs` stands for ?? – swapnesh Mar 22 '14 at 10:03
  • 1
    I'd go with one CSS file and using `@media` queries for different screen sizes; As the assets are cached usually by most web browsers and also you could send the gzip version of the CSS file to the browser. – Hashem Qolami Mar 22 '14 at 10:04
  • The questions is too abroad and may have different answers.. – user3340575 Mar 22 '14 at 10:17
  • possible duplicate of [Single huge .css file vs. multiple smaller specific .css files?](http://stackoverflow.com/questions/2336302/single-huge-css-file-vs-multiple-smaller-specific-css-files) – user123444555621 Mar 22 '14 at 10:25
  • @Pumbaa80 Hello, thanks to pointing me to that link. I'm not english native speaker, I should have try different keywords in my search such as single huge .css vs multiple smaller .css, would never had think about it. sry I duplicated question. – JackLinkers Mar 22 '14 at 10:38

2 Answers2

1

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.

designosis
  • 5,182
  • 1
  • 38
  • 57
  • hello & thanks for your imput. So you think it's more beneficial to have a single .css file even if 80% of it is unused by current page ? (yes of course I send gziped content). I agree the file would be downloaded once and cached, but is it worth load such a large file on index ? – JackLinkers Mar 22 '14 at 10:18
  • well, depends on your visitor flow. most people will hit the home page, then a subpage. if a high percentage of your visitors will always bypass the home page, then there's a case for splitting out the css. otherwise they'll need that code anyways. it's almost always better to combine file assets. combined css + js + image sprites = good practice. – designosis Mar 22 '14 at 10:24
  • Great, I think I'll give a try for that option : base.css + currentpage.css + js + image sprite as Google PageSpeed combines everything. Thanks – JackLinkers Mar 22 '14 at 10:33
  • if my answer was helpful, click the up arrow next to the answer, or the checkmark if its the best answer you could find. stackoverflow is a `points = appreciation` system, and you're MUCH more likely to get a good response if you respond to answers and questions by up/down voting. – designosis Mar 22 '14 at 10:40
0

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

JackLinkers
  • 325
  • 1
  • 2
  • 13