Zhengchun CSS Notes (6)-on the development of CSS framework

The individual summed up a bit of experience in developing CSS frameworks, shortcoming. I hope everyone's discussion can make us progress together. :)

1. CSS Framework

China's internet industry has been developed for 10 years, the browser from the earliest popular NS to the present ff3.ie7 and so on ... The position of the front-end development engineer was also born. In recent years in web development, there is a very hot word-"framework". YUI, JQuery, prototype these JavaScript framework in the development of the site, it is a front-end development engineers in the hands of the weapon. Why, then? Because a framework is a tool, a library of functions, a convention, and an attempt to abstract reusable generic modules from common tasks, let designers and programmers avoid duplication of development. In layman's terms, most of the time spent on repetitive work is saved.

Writing CSS is the same, from the initial definition of text color, content typesetting, to the present definition of all the performance. CSS frameworks are also being taken seriously, as we all recognize that abstracting abstract modules from representational performance is the most important means of reducing user downloads, facilitating team and personal development.

2, the development sequence of CSS framework

A) format of reset.css

The real benefit of formatting CSS is that you can quickly start your work by introducing frames into new HTML files without having to deal with resetting padding and margins to achieve uniform typography and the same performance in browsers.

b) layout layout.css

Define whether the page is two or three columns, full screen or 1024x768 ...

The design of a Web site may have many layouts, but most are made up of several reusable layouts that selectively introduce the desired layout and quickly apply the expected page layout.

c) basic style Type.css

Defines font size and color for body, H1-h6, a:link-a:active, p, and so on.
Basic style of CSS reference, such as the UL definition class for "ul-text", used to show the same icon, line spacing, link color.
It can also be applied like this: class= "Ul-text Square", Li before showing the square type icon.

d) table modification TABLE.CSS

Defines the performance of labels such as table, TR, TD, Th, THEAD, TFOOT, Tbody, caption, and so on.
The same as the basic style, but the form in the existing Web site is almost the presentation of data processing, so separate the reference. For example, applying table-style-1 on a table is a table with a black border, table-style-2 a yellow border.

e) form modification FORM.CSS

Defines the performance of the labels for FieldSet, label, button, input, select, and textarea.
Most Web site forms, buttons, and input boxes are almost the same. The introduction of this CSS is to facilitate the unification of the display in each browser. The default buttons, input boxes and so on in each browser to show the difference is very large, although in the format of the CSS has been initially unified, but the border of the input box, button style are required in this CSS defined. But the select can not be unified, if taken into account with JS, this cost is too big point.

f) print cosmetic print.css

The page that modifies the printout.

g) css with other CSS

Frontpage.css, List.css, Detail.css, REGISTER.CSS, etc.

According to various references to introduce the corresponding CSS. For example, the list page does not require a table to be decorated, so it does not introduce table.css. To conserve the amount of code.

3, the establishment of CSS Framework folder

A) The core of the main
Store Reset.css, Layout.css, Type.css, print.css

b) Bud module
Store Table.css, Form.css, album.css and other CSS

c) Petal Specific applications
Store the encapsulated CSS. Frontpage.css, Llist.css, Detail.css, Register.css and other CSS. The CSS stored in this folder is directly referenced.

The name of the folder, according to personal preferences! I would also like to name the electron, proton and so on. Hey!

4, the advantages of the CSS framework

(a) Improved development efficiency.
b) Specification name definition, easy to maintain.
c) Standardize the project development process
d The CSS code is clearer and simpler. The HTML code is more reasonable.

5, the drawbacks of the CSS framework.

(a) Increased learning costs. You need to understand the entire framework and need to read the framework documentation.
b The CSS framework is bloated for pages such as a small project. There may be most of the code you can't use in the framework.
c) may not be able to help you improve your technology. Too dependent on the framework to make it difficult to troubleshoot bugs. Include bugs that are in the frame itself.
(d) It is painful to choose the framework and development framework that you need. Writing to the back found more and more inflexible, more and more bloated. The remnant reads the-_-

6, the development and use of CSS framework often encountered problems.

1, the external reference style of the page too much.
For example, the margin definition of UL, in the format of the CSS will be declared as 0, and in the basic style of CSS may be declared margin:5px 10px;
So there are multiple definitions in the YSlow.

2, the component reuse of the consideration.
For example, the CSS in the form definition defines all of the form's adornments, and assumes that only 30% of this CSS is required to register this page. Should that cut out the 70%?

Comprehensive above two questions, the individual thinks solves the way is the encapsulation, lets some have, should not have some not. Minimize the number of HTTP connections and the size of the CSS. But if this is done completely, the reusability of CSS will become very poor, the later manual encapsulation will be very painful. Can only be applied to the pony's word "specific circumstances, specific analysis." Life is a contradiction.

3, in the end should not support em?
Visible if you want to support EM, the biggest goal is to be in the browser can be based on the user's resolution size free scaling, for a large display of users and small display users is very useful. But after capturing our user's browser data, found that the two end of the user is very few, it is conceivable that for this part of the user spend more than normal development of more than one time is obviously not a cost-effective thing, so the original in the development of Tbsp, our team decided not to support EM. Of course this is a suggestion and we also want to use EM to give the user the best feeling.

Above six points is me and the whole Taobao ued team in the day-to-day development of thinking and summary, you may put forward some different views, it does not matter, leave us a message, together to discuss it!