Modular css--Manage your entire site's CSS files

Why would you want to split the style file?

Easier to find style rules. Simplifies maintenance and facilitates management. You can also provide a specific style for a page.

Why would you like to add a bridging style?

You can add or remove styles at any time without having to modify the HTML document.

Why define two types of media?

NN4 @import is not supported, so bridging styles are not recognized.

@import ' Header.css ';

@import ' Content.css ';

@import ' Footer.css ';

@imports How does it work?

It imports all CSS rules from one file to another [email protected] cannot be old

Recognized by the browser.

for Large Sites , this is an ideal concept.

Hack-free CSS

Dealing with the compatibility of annoying browsers such as IE is one of our biggest headaches.

Many friends use CSS Hack to solve these problems.

The problem is that when the version of IE is upgraded and the support for CSS is improved, the previously used hacks will be invalid !

How did you solve the problem?

"We ask you to update your page without using CSS hacks. If you want to target IE or avoid IE, you can use conditional annotations ."

How do conditional annotations work?

Step one, for IE, create a learning style file

Step two, add conditional Comment code at the beginning of the HTML document

Only the specified version of IE browser recognizes the style of the heart, and the other browsers will completely ignore it.

Common browser Recognition: (non-IE browser, such as Firefox, Chrome, etc.)

Specific IE version identification:

For example, most browsers will add padding to the container's width, but IE5 will not. In this case, IE5 shows a smaller container.

MAIN.CSS (recognized by all browsers including IE5):

#container {width:600px; padding:100px;}

IE5.CSS (only IE5 recognition):

#container {width:800px;}

Why is a conditional comment a good solution?

1. No Hacks
A specific CSS rule appears only in the new style table.

2. File separation
The styles defined for a particular version of IE are detached from the main stylesheet, which can be easily removed when the Internet Explorer updates the property support.

3. Targeted
It is possible to define the relevant properties for different versions of IE browser.