Summary of daily CSS framework development experience

CSS framework allows you to write CSS code of a website more quickly, effectively, and elastically. In our previous articles on bkjia.com, we have introduced many articles about this kind of knowledge. The following is a reflection and summary of a well-known team in daily development. You may come up with some different ideas, it doesn't matter. You are welcome to comment on it and discuss it with many cssers of bkjia.com!

I. CSS framework

The Internet industry in China has been developing for 10 years, and browsers have evolved from the first popular NS to FF3.IE7 ...... Front-end development engineers have also emerged. In recent years, there has been a very popular term in web development-"framework ". The YUI, JQuery, and Prototype javascript frameworks have become powerful front-end development engineers when developing websites. Why? Because the Framework contains tools, function libraries, conventions, and attempts to abstract reusable General modules from common tasks, designers and programmers can avoid repeated development. In layman's terms, it saves most of the repetitive work time.
The same is true for writing css. From the beginning, it only defines the text color and content layout, and now it defines all the representations. The css framework has been gradually paid attention to, because we all realize that abstract modules are extracted from the concrete expression for reuse, it is the most important way to reduce user downloads and facilitate team and personal development.

Ii. Sequence of css framework development

1. Format reset.css
The real benefit of formatting css is that it can quickly start the work. You can introduce the framework into the new HTML file without having to reset the padding and margins, achieve unified layout and the same performance in the browser.
2. layout.css
Define whether the page is two or three columns, whether it is full screen or 1024 × 768 ......
The design of a website may have many la S, but most of them are composed of several reusable la S. The layout required for selective introduction can be quickly applied to the desired page layout.
3. Basic style type.css
Defines the font size and color for the body, h1-h6, a: link-a: active, p, and so on.
Css reference of the basic style. For example, define ul class as "ul-text" to display the same icon, line spacing, and link color.
It can also be applied like this: class = "ul-text square", which shows a square icon before li.
4. Table modification table.css
Define table, tr, td, th, thead, tfoot, tbody, caption, and other labels.
Similar to the basic style, tables are processed in almost all forms on existing websites, so they are stored separately for reference. For example, apply table-style-1 to a table with a black border, and table-style-2 to a table with a yellow border.
5. Form modifier form.css
Defines the performance of fieldset, label, button, input, select, and textarea labels.
Most websites have almost the same forms, buttons, and input boxes. This css is introduced to facilitate uniform display in various browsers. The default buttons and input boxes are displayed in different browsers. Although they have been uniformly formatted in css, the border of the input box is, the style of the button must be defined in this css. However, the select statement cannot be unified. if Javascript is used for implementation, the cost is too high.
6. Print and modify print.css
Modify the output page.
7. css containing other css
Frontpage.css1_list.css1_detail.css1_register.css, etc.
Introduce the corresponding css based on various references. For example, if the listpage does not have any decoration for a comment table, table.css will not be introduced. To save the amount of code.

3. Create a css framework folder

1. core
Save reset.css1_layout.css1_type.css1_print.css
2. bud Module
Save table.css1_form.css1_album.css and other css
3. petal Application
Stores encapsulated css. Frontpage.css1_llist.css1_detail.css1_register.css and other css. Css stored in this folder is directly referenced.
Folder name, according to your preferences! I also want to use the names of electrons and proton. Hey!

Iv. Advantages of the css framework

1. Improve development efficiency.
2. Standardized name definition for easy maintenance.
3. Standardize the project development process
4. css code is clearer and simpler. Html code is more reasonable.

V. disadvantages of css framework

1. Improved learning costs. You need to understand the entire framework and read the framework documentation.
2. The css framework is very bloated for pages such as a small project. Most of the code that you cannot use in the framework.
3. You may not be able to improve your technology. It is so dependent on the framework that it is difficult to eliminate bugs. Including bugs inherent in the framework.
4. It is painful to select the desired framework and development framework. It becomes increasingly inflexible and bloated. Concept -_-

Vi. problems frequently encountered during the development and use of css frameworks

1. There are too many styles referenced outside the page.
For example, the margin definition of ul is declared as 0 in the formatted css, And the margin: 5px 10px may be declared in the css of the basic style;
Therefore, multiple definitions are displayed in Yslow.
2. Component reusability considerations.
For example, the css defined in the form defines the modification of all forms, and it is assumed that only 30% of the css is required in registering this page. Should it be cut out?
Based on the above two problems, I personally think that the solution is encapsulation, so that there is something that shouldn't be. Minimize the number of http connections and the size of css. However, if this is done completely, css reusability will become very poor, and manual encapsulation will be very painful in the future. You can only use the phrase "specific situation, specific analysis" from pony ". Life is really a conflict...
3. Should I support em?
It can be seen that to support em, the biggest purpose is to allow the browser to scale freely according to the user's resolution. It is very useful for users with large and small displays. However, after collecting the browser data of our users, we found that there were very few users at the two end, it is obviously not cost-effective to spend more than twice the normal development time for this part of users. Therefore, when developing tbsp, our team decided not to support em. Of course this is a suggestion, and we also hope to use em to give users the best experience.