CSS common file structure

Generally a website will have such three styles:

Global.css | RESET.CSS (formatted style)
Common.css (common component style)
LAYOUT.CSS (current page style)

Clears the browser default style for all pages in the entire station, ensuring that the initial style is consistent across all browsers.

Common.css (common component style)

Generally a site all the page head, bottom style are consistent, and a long time will not have a big change, the change is probably the product, the operation of the often need to add, remove some of the entrance requirements, to ensure that the entire station all page header once replace the effective, as long as the head file, has the corresponding style, immediately effective, will soon be responding.

such as page flipping, form (input box, button) and other styles are also the whole station unified, put these styles are in the common.css inside, if all the button style to change, a replacement is successful.

LAYOUT.CSS (current page style)

All styles other than public components are written into this style file, and a separate style is guaranteed for a page, and the page HTML and CSS notation are modular to ensure quick response to frequent iterations of the project.

Why to guarantee a page a separate style, and to modular, certainly have friends and I have had the same experience, modify a line of style code, the entire page even n pages will be affected, engaged in a half-day still do not know where the problem, back to the revision before the version, there is no problem. Finally found the reason, but can not change the previous style, but also can not delete, can only increase, time a long, CSS style file more and more large, and finally overwhelmed, the entire page code can only be rewritten.

In fact, GLOBAL.CSS and Common.css can also be merged into a file , after all, formatting style is then dozens of lines of code, and formatting style, head, the bottom style of each page will be used.

This way, each page has only 2 styles:

Common.css
Layout.css
If there are too many components in the common.css, and many components are not commonly used, you can do the following as well:

HEADS.CSS (format language style, head, bottom)
Common.css (common component style)
LAYOUT.CSS (current page style)
In general there are only 2 styles, and there are not too many problems when you need to use components to link component styles.

Finally, do not put anything into the component style inside the plug, there is writing would rather each page repeat copy and do not plug into the component style inside. One day, you'll find that this component is too big to be scary and a lot of useless.

/*********** General Basic Class 1************/

/* Format Style */
BODY,DIV,DL,DT,DD,UL,OL,LI,H1,H2,H3,H4,H5,H6,PRE,FORM,FIELDSET,INPUT,TEXTAREA,P,BLOCKQUOTE,TH,TD {margin:0; padding:0;}
Table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
Address,caption,cite,code,dfn,em,strong,th,var {Font-style:normal;font-weight:normal}
Ol,ul {List-style:none}
caption,th {Text-align:left}
H1,h2,h3,h4,h5,h6 {Font-size:100%;font-weight:normal}
Q:before,q:after {content: '}
abbr,acronym {border:0}

/* Text layout, color */
. f12{font-size:12px}
. f13{font-size:13px}
. f14{font-size:14px}
. f16{font-size:16px}
. f20{font-size:20px}
. Fb{font-weight:bold}
. Fn{font-weight:normal}
. T2{text-indent:2em}
. Red,a.red{color: #cc0031}
. Darkblue,a.darkblue{color: #039}
. Gray,a.gray{color: #878787}
. lh150{line-height:150%}
. lh180{line-height:180%}
. lh200{line-height:200%}
. Unl{text-decoration:underline;}
. No_unl{text-decoration:none;}

/* Positioning */
. Tl{text-align:left}
. Tc{text-align:center}
. Tr{text-align:right}
. Fl{float:left;display:inline}
. Fr{float:right;display:inline}
. Cb{clear:both}
. Cl{clear:left}
. Cr{clear:right}
. Vm{vertical-align:middle}
. pr{position:relative}
. Pa{position:absolute}
. abs-right{position:absolute;right:0}
. zoom{zoom:1}
. Hidden{visibility:hidden}
. None{display:none}

/* Length Height */
. w10{width:10px}
. w20{width:20px}
. w50{width:50px}
. w90{width:90px}
. w100{width:100px}
. w200{width:200px}
. w250{width:250px}
. w500{width:500px}
. w800{width:800px}
. w{width:100%}
. h50{height:50px}
. h80{height:80px}
. h100{height:100px}
. h200{height:200px}
. h{height:100%}

/* Margin */
. m10{margin:10px}
. m15{margin:15px}
. m30{margin:30px}
. mt5{margin-top:5px}
. mt10{margin-top:10px}
. mt15{margin-top:15px}
. mt50{margin-top:50px}
. mt100{margin-top:100px}
. mb5{margin-bottom:5px}
. mb10{margin-bottom:10px}
. mb15{margin-bottom:15px}
. mb100{margin-bottom:100px}
. ml5{margin-left:5px}
. ml10{margin-left:10px}
. ml15{margin-left:15px}
. ml20{margin-left:20px}
. ml30{margin-left:30px}
. ml50{margin-left:50px}
. ml100{margin-left:100px}
. mr5{margin-right:5px}
. mr10{margin-right:10px}
. mr15{margin-right:15px}
. mr50{margin-right:50px}
. mr100{margin-right:100px}
. p10{padding:10px;}
. p15{padding:15px;}
. p30{padding:30px;}
. pt5{padding-top:5px}
. pt10{padding-top:10px}
. pt15{padding-top:15px}
. pt20{padding-top:20px}
. pt30{padding-top:30px}
. pt50{padding-top:50px}
. pb5{padding-bottom:5px}
. pb100{padding-bottom:100px}
. pl5{padding-left:5px}
. pl10{padding-left:10px}
. pl50{padding-left:50px}
. pl100{padding-left:100px}
. pr5{padding-right:5px}
. pr10{padding-right:10px}
. pr15{padding-right:15px}
. pr100{padding-right:100px}

/*********** General Basic Class 2************/

/* Copyright tsxmlove. All rights Reserved. */
* {
padding:0px;
margin:0px;
Text-align:left;
Font-family:arial, Verdana, Tahoma, "Song Body", Helvetica, Sans-serif;
line-height:150%;
}
Body {
font-size:14px;
Text-align:center;
Color: #000000;
Background-color: #DEEBF3;
Background-image:url (... /images/body_bg.jpg);
Background-repeat:repeat-x;
}
Table {
Border-collapse:collapse;
}
TD {
padding:3px;
}
img {
Border:none;
}
Input {
padding:1px;
Vertical-align:middle;
Line-height:normal;
}
. main-box {
Margin-right:auto;
Margin-left:auto;
width:960px;
Clear:both;
Zoom:1;
Overflow:hidden;
Background-color: #CCCCCC;
}
. text-overflow-hidden {
White-space:nowrap;
Word-spacing:normal;
Letter-spacing:normal;
Overflow:hidden;
}
. box-align-center {
Margin-right:auto;
Margin-left:auto;
}
/*css defines a hyperlink four states are also in order. */

A:link, a:visited {
Text-decoration:none;
Color: #1F376D;
}
A:hover, a:active {
Text-decoration:underline;
Color: #BD0A01;
Border:none;
}
/* The above statements define the styles of links, visited links, mouse over, mouse down, respectively.
Note that you must write in the order above or the display may not be the same as you expected. Remember that their order is "LVHA". */
UL {
Clear:both;
Overflow:hidden;
width:100%;
}
ul, li {
list-style:none;
}
. valign {
Display:table-cell;
*display:inline;
Zoom:1;
Vertical-align:middle;
}
. Text{word-wrap:break-word;overflow:hidden;word-break:break-all;}
/*======================css vertically centered =======================*/
. holder {
width:740px;
height:300px;
border:1px solid #777;
Text-align:center;
Display:table-cell;
Vertical-align:middle;
}
/* The following styles are for ie*/
. Edge {
width:0;
height:100%;
Display:inline-block;
Vertical-align:middle;
}
. container {
Vertical-align:middle;
Display:inline-block;
}
/*===============================================*/

/*css hack*/
. class {
Background-color: #FFFF00; * * All browsers */
*background-color: #00FF00;/*ie*/
_background-color: #00FFFF;/*ie6*/
}
/*====== Universal Float Closed ======*/
. clear:after {
Content: ".";
Display:block;
height:0;
Clear:both;
Visibility:hidden;
}

. clear {Display:inline-block;}/* for IE/MAC */

/*<!--main stylesheet ends, CC with new stylesheet below ...-->*/

. Clear {
Zoom:1; /* Triggers haslayout */
Display:block; /* Resets display for Ie/win */
}/* Only IE can see inside the conditional comment
and read this CSS rule. Don ' t ever use a normal HTML
Comment inside the CC or it'll close prematurely. */
/*====== Universal Float Closed 2======*/
. Overflow-hidden{overflow:hidden;} /* Control Background overflow */
. equal-height{margin-bottom:-32800px;padding-bottom:32800px;} /* Control height is small enough */

/*====== Universal Float Closed 3======*/

. Clear
{
height:0px;
Clear:both;
font-size:0px;
line-height:0px;
Zoom:1;
}

"Reprinted from the Internet"

CSS common file structure