CSS tutorial about css framework web design

I personally summarized some experience in developing css framework and made a fool of myself. I hope your discussion will enable us to make progress together. :)

　1. CSS framework
　 China’s Internet industry has developed for 10 years, and browsers have also evolved from the earliest popular NS to the current FF3.IE7 and so on... The position of front-end development engineer was also born. In recent years, there has been a very popular word in web development - "framework". JavaScript frameworks such as YUI, JQuery, and Prototype have indeed become powerful tools for front-end development engineers when developing websites. why? Because the framework includes tools, function libraries, conventions, and attempts to abstract common modules from common tasks that can be reused, allowing designers and programmers to avoid repeated development. In layman's terms, it saves most of the time on repetitive work.

The same goes for writing css. From the beginning, it was just defining text color and content layout, to now defining all performances. The CSS framework has gradually received more attention, because everyone realizes that extracting abstract modules from concrete expressions for reuse is the most important means to reduce user downloads and facilitate team and individual development.

　2. Development sequence of css framework
　a) Format reset.css

　The real benefit of formatting css is that it can start work quickly. You can introduce the framework into a new HTML file without having to deal with resetting padding and margins. , to achieve unified layout and the same performance under the browser.

b) Layout layout.css

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

A website design may have many kinds of layouts, but most of them are composed of several complex layouts. Practical layout composition, selectively introduce the required layout, and you can quickly apply the desired page layout.

　c) Basic style type.css

　 Define the font size and color of body, h1-h6, a:link-a:active, p, etc.
　 CSS reference of basic styles, such as defining ul class as "ul-text" to display the same icon, line spacing, and link color.
　You can also apply it like this: class="ul-text square", the square icon is displayed in front of the li.

　d) Table modification table.css

　 Define the performance of tags such as table, tr, td, th, thead, tfoot, tbody, and caption.
　It is the same as the basic style, but the presentation form of the table on the existing website is almost all data processing, so the references are stored separately. For example, if table-style-1 is applied to a table, it will be a table with a black border, and table-style-2 will be a table with a yellow border.

　e) Form modification form.css

　 Define the performance of fieldset, label, button, input, select, and textarea labels.
Most websites’ forms, buttons, and input boxes are almost the same. The reason why this css is introduced is to facilitate unified display in various browsers. The display of default buttons, input boxes, etc. in various browsers is very different. Although it has been initially unified in the formatted css, the borders of the input boxes and the styles of the buttons need to be defined in this css. Unfortunately, the selection cannot be unified. If you consider using js to implement it, the cost is too high.

　f) Print modification print.css

　　Modify the printed output page.

　g) CSS that contains other css

frontpage.css, list.css, detail.css, register.css, etc.

Introduce the corresponding CSS according to various references. For example, if there is no table modification in the list page, table.css will not be introduced. to save code.

　3. Creation of css framework folder
　a) core mainly
stores reset.css, layout.css, type.css, print.css

b) bud module
stores table.css, form.css, album .css and other css

　c) petal specific application
　 Store encapsulated css. frontpage.css, llist.css, detail.css, register.css and other css. The css stored in this folder are directly referenced.

　The naming of the folder is based on personal preference! I also hope to name it with electrons, protons, etc. hey-hey!

　4. Advantages of CSS framework
　a) Improve development efficiency.
　b) Standardized name definition for easy maintenance.
　c) Standardize the project development process
　d) The css code is clearer and simpler. The html code is more reasonable.

　5. Disadvantages of CSS framework.
　a) Increased learning costs. You need to understand the entire framework and read the framework's documentation.
　b) The css framework is bloated for pages such as a small project. There may be a lot of code in the framework that you won't use.
　c) It may not help your skills improve. Too dependent on the framework, making it difficult to troubleshoot bugs. Including bugs inherent in the framework.
　d) It is painful to choose the framework and development framework you need. After writing it, I found that it was becoming more and more inflexible and bloated. Sorry -_-

　6. Common problems encountered in developing and using CSS frameworks.
　1. There are too many external reference styles on the page.
　For example, the margin definition of ul will be declared as 0 in the formatted css, and margin: 5px 10px may be declared in the basic style css;
　So there will be multiple definitions in Yslow.

　2. Consideration of component reusability.
　For example, the css of the form definition defines all the form modifications, and it is assumed that only 30% of this css is needed in the registration page. Should we cut out the unnecessary 70%?

Based on the above two problems, I personally think that the solution is to encapsulate, so that what should be there and what should not be there are not. Try to reduce the number of http connections and the size of css. But if this is done completely, the reusability of CSS will become very poor, and manual encapsulation in the later stage will be very painful. We can only apply Xiao Ma’s words: “Specific circumstances require specific analysis.” Life is really a contradiction...

　3. Should we support em?
　It can be seen that if we want to support em, the biggest purpose is to be able to freely scale the browser according to the user's resolution. For users with extremely large monitors and small Monitor users are very useful. However, after collecting the browser data of our users, we found that there are very few users who are at these two ends. It is conceivable that it is obviously not cost-effective to spend more than twice the normal development time for these users, so When we were 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.

The above six points are the thoughts and summaries of my and the entire Taobao UED team’s daily development. You may have some different opinions. That’s okay. Leave us a message and let’s discuss it together!

The above is the content of the CSS tutorial on CSS framework web design. For more related articles, please pay attention to the PHP Chinese website (www.php.cn)!