New website revision-HTML CSS some personal ideas

New website revision-HTML CSS some personal ideas

-CSS common style split {

U head.css

U nav.css

U footer.css

U reset.css

U common.css

U module_md.css– Media module (movie, TV series)

U module_vd.css– Small Video Module

U module_lst.css– Leaderboard Module

U page.css– pagination

U z_index.css– Hierarchy Style (all the DOM that needs to be z-index for the site, all categories, to the category of each feature under a range, so should be able to manage the z-index, I am very much hurt AH)

U title.css

-    }

-css{of the business layer

N movie.css

N tv.css

N index.css

N...

-    }

-CSS encoding format, see people like that pattern, finally determine a bar, or a little messy {

N expanded format such as. x{

width:10px;

height:10px;

}

n Compact format such as. x{width;10px;height:10px;}

-    }

-CSS naming Ideas {

n I now on the name is very helpless, some English words too long do not know how to shorten the adaptation, but also to let others understand this is what to do. (usually a Youdao dictionary ~)

N naming recommendations with popular initials FX-IDX (home), FX-TV (TV series), FX-MD (Media page), Fx-var (arts), Fx-coo (anime), FX-PL (play page), etc.

n There must be a naming conflict when you develop, such as a public style. Item, you use it when you develop it. Item, the best way to do this is to add a hierarchy such as the home page. Fx-index. Item

n level also do not write too deep, resulting in later to reset this style will be more deep, but also lead to the efficiency of the CSS reduced (although very little) such as the play page revision I nested some deep, the previous seed style did not write well, the structure is not very clear, resulting in the time of the reset is a bit tricky (too deep).

N Class name try not to duplicate ID

-    }

-Does the Css individually set the class of Margin20 padding20, or write directly to the corresponding class inside such as. y{margin:20px;padding:20; and we'll look at which way is better maintenance or more convenient, Finally, unify the standard notation.

-Css comments are also very important, although there is no complex lines and syntax, but still need to tell other front-end development This piece is what to do, it is recommended that everyone write down comments, easy to maintain.

-

-The media to show the HTML structure of the seed, this revision to note, it is best to be able to achieve unity, that is, movies, TV, search media display can be done with a set of HTML structure (ideal), or to the need to show the seed panel dom add a meaningless class, convenient later traversal. Let's study and see if the plan is more reliable.

Css try to use precompiled development such as sass, less, I recently looked at some of these two languages, sass more powerful than lower, and now a lot of companies are using this. The two languages FIS have plug-ins can be installed, for JS Daniel more friendly, for me this JS small white also good, basically we practice to get started.

With this development also has certain advantages, the coding style will be consistent, also will write less code, can save a lot of similar code, avoid code duplication.

The revised response layout can be used @media query, the browser basically supports this property (IE9 below is not supported, you can use JS processing).

I think this revision, participate in the revision of the front-end students can sit together or open a small will consider how to do, the public and the special vulgar style or structure analysis and analysis, and then everyone in the hands to do, save late patching (very injured ~).

Http://www.w3cplus.com/sassguide/syntax.html This is the syntax and installation of the Sass language

Syntax and installation of the Http://www.bootcss.com/p/lesscss/less language

How to install plug-ins under Https://github.com/fouber/fis-parser-sass FIS

http://www.cnblogs.com/web-ed2/archive/2011/08/03/2126748.html CSS Optimization

Everyone has a good idea to write, then let's find a time to touch.

New website revision-HTML CSS some personal ideas