Compile a CSS file with a good structure

Compile a CSS file with good structure Date: Source: translated Translation: Water mingsheng | webpage, CSS

Nice looking, elegant and concise :) BecauseCodeIt is also a page structure with a certain charm
OK. Now you can design the website structure. If the layout draft of the website is ready, it can be completed quickly. No matter which layout type you choose (stream or fixed width), I suggest you define one. container class, and make it contain CSS labels with the same width. In this case, if you want to change the page width, you only need to modify it. the width of the container class is enough. The width of the elements contained in the container class is automatically adapted.

This is an example of my welcome section (the Green Section in the navigation bar ):

And the following CSS code is my left column (including the post body) and sidebar:

HTML code
Once the main block of the site has been defined with CSS, you can start to write HTML code. There is nothing complicated, just add the correct Div layer ID in the correct order:

<Div class = "Container">

<! -- Header -->
<Div id = "logo"> </div>
<Div id = "navbar"> </div>
<Div id = "Welcome-section"> </div>

<! -- Main content -->
<Div id = "column_left">
</Div & gt;
<Div id = "sidebar">
</Div>

<! -- Footer -->
<Div id = "footer"> </div>

</Div>

If the test is normal on the browser, You can gradually set the blocks (navigation, sidebar, footer ...) add new specific CSS code, that is, complete your CSS and integrate HTML code in a structured manner. Indent all code dependent on the same class:

When you have to find a specific tag in your CSS code, this cleverness will have unexpected results.

Put the custom class at the end
Generally, if multiple blocks of some classes are used, I will add them to the end of the CSS file in this way:

I named each class with a semantic name that quickly recognized its main attribute.

I hope these tips can simplify the way you write and manage CSS code.