Geek Answers Handbook

CSS Recommendations for a Large-Scale Website

Until now, my experience in web design has been with very small sites and blogs (where there is not much variety in page styling). However, now I am starting to solve some significantly larger websites, and I want to start with the right foot, creating a scalable and supported css file / structure.

My current method of applying styles to web pages is to provide each web page with a separate identifier in the body, and then when I create the page, my css rule will look like this:

body#news section .top { rules }

Undoubtedly, is there a more convenient approach to applying CSS for a large-scale website?

+5
source share
5 answers

body . ? , , , .

main.css, (, administration.css , , admin ), (, signup.css).

, , , "" .

, main.css :

a { color: red; }

... - , :

a { color: blue; }

, signup.css main.css.

<link rel="stylesheet" href="/stylesheets/main.css">
<link rel="stylesheet" href="/stylesheets/signup.css">
+6

:

  • CSS . , HTTP- ( ).
  • CSS , , , , , . , - - . , ​​ SVN ( , ), .
  • , , minifier "" CSS. , , frontend. . CSS minifier?.
+1

, , , , , body.

, (, , ..), , . , .., id = news.

. resuable css, .

0

CSS. . , .

CSS . :

.top .top, .top, , #news ... ..

, , . .top, , - #news, #news.top.

.

margin:0 5px;


margin:0 5px 0 5px;

This is basic, but you would be amazed at how many people do not.

Also find out what you can short-circuit:

ex: font:bold 12px Helvetica, Arial, sans-serif;

One thing that is very useful is that you alphabetically order your rules. Especially if you use CSS3 -webkit- and -moz- properties. I get a lot of response to this, but I work with 12+ developers, and I saw

.myClass { color:#f00; /* more stuff */ color:#fff; }

If they are in alphabetical order, you will avoid code duplication.

0
source

More articles:


All Articles