CSS Advanced Tutorial: CSS Framework

Article Introduction: What you can learn from the CSS framework.

Now many people will use the CSS framework for rapid build station.
What is the CSS framework, typically a collection of CSS files that include basic layouts, form styles, grids, simple components, and styling resets. Use the CSS framework to significantly reduce the cost of work to build the station quickly.
Of course, for some large projects, it may be difficult to copy some of the framework directly used, because direct use will bring some limitations or redundancy problems.
However, in the CSS framework has become increasingly mature today, in our design project framework, norms, there are some excellent framework on the market can also provide us with a lot of useful places.

This article mainly discusses from several aspects of the CSS framework can be used for our project reference point:

1. Directory organization
2. CSS specification
3. Graphics
4. Application Method
5. Small recommendations

1. Directory organization

In the directory organization analysis we refer to Bootstrap, Blueprint, Yui, Yaml Four framework of the organization

When using a frame, we typically link the style of the desired frame to the page and then modify it based on it. So the style that the frame itself takes can be understood as the underlying style. That's what we call the Global style + component style.

As you can see, the 4 frameworks on the directory architecture are basically organized in a regular way that follows basic styles + user-defined extension styles.

However, if you follow the Bootstrap approach, it is possible to introduce infrequently used component styles as well as global styles, and if you write the components in global CSS, it's best to ensure that the components are more frequent and avoid unnecessary bandwidth wastage.

About hack:

For the hack written for the lower version of the browser, the way it is handled, Blueprint and Yaml are handled in the form of a separate hack file, and I have tried this approach.
The advantage of this approach is that it avoids the use of redundant code for advanced browsers, and that introducing CSS with conditional judgment does not bring additional requests to advanced browsers.

This method is more suitable, the high and low level browser originally deliberately designed to have a big difference in the case, that is, hack more time to use. Otherwise, it would not be advisable to introduce more than one document for a dozen hack.

2. CSS specification

A. Prefix

The public modules in the framework have prefixes, each with the following 3 ideas:

1. Yaml, Yui: In any case, is a unified logo at the beginning, plus the name of the change module.
2. Bootstrap: Direct module name, this way needs to define keywords. A public module is a button that starts with a btn– and image begins with a img-.
3. NEC: A single letter begins to identify the component.

Generally apply a framework, we first introduce the style of the frame, and then cover their own style, so you can think of the framework as our basic CSS.

We can draw on the framework prefix specification to plan our basic CSS prefix, according to their own project actual situation to take different scenarios.

B. Classification of classes

Classes are divided into 2 main criteria in the framework, namely, "Component granularity" and "attribute is granularity".

1. Component granularity: Encapsulates all the styles of a component in a class name and invokes the class name to use the component.
2. Attribute is granularity: When need attribute, call corresponding class name assemble.

In our daily projects, it is rare to classify class names by attributes, because the principle of "structure, style and behavior" is always followed, which aims to reduce the coupling degree of the three.

However it is not entirely undesirable to divide in this way in some specific cases.

For example, for the concealment of some elements, if you do not provide the relevant class name, in the JS development phase development will be directly inline style on the corresponding elements (this will trigger Repaint/reflow), so the better way is and JS Development agreement a class name trigger show/hidden action, in this case , give Display:none a specific class name, the supply development call will be very useful.

Therefore, it is more important that we analyze the actual situation and give the best solution.

C. Component class Name combination method

The style of the component is basically the base class name + extension class name routines to make a combination of changes.

However, there are 3 ways in which the selector can be used, and the most current framework uses a multiple-class selection that restores by modifying the class name combination of HTML.

Take the implementation of the button style as an example:

This is a regular combination, no longer repeat.

D. Advanced CSS Selector

In the process of analyzing the Bootstrap, it is found that Bootstrap defines a series of icon, and the class names of these icon are all prefixed with icon-.

In CSS, Bootstrap uses a substring matching attribute selector.

[class^= "icon-"]

The advantage of this is that, for Icon class label, we no longer need to add an icon for the common class name, only need class name is to start with icon-can match all icon, the province of a class name.

This way you can reduce the cost, but only in the ie7+ browser, if you want to use the class selector, consider whether you need a compatible IE6.
Although the IE6 is not supported, the Advanced CSS selector is really attractive and can be used to move the end, so here's a reference.

3. Graphics

In the reference CSS framework, they provide some simple graphical elements, but the way they are implemented differs from one another.

But the common denominator is that today's newer frameworks, for some simple effects, will use CSS3 to implement some simple gradients and gracefully downgrade the lower version of IE.

4. Application Method

In terms of how these frameworks are used by reference examples, they are basically consistent with our usual project usage.

In the way of application, there are generally two kinds of ways.

1. For a component-grained style:
Use the component's HTML structure to flatten its own page module, and then assist in adding a custom class name to control its personalization definition.

2. For attributes with a granular style:
Stitch the class name according to the style you want.

Here are a few simple examples:

1. The granularity of the components:
For a component overlay, take a generic custom class name overlay style, which is not covered here.

2. The granularity of the attribute:

You can see that if you want the style is a property to granularity, that is, the corresponding class name can be transferred, but in the actual project, this approach due to lack of flexibility, and did not do the structure and style separation, the actual project is relatively rare in this usage.

For functional actions, such as display/hide elements, you can flexibly use this method, write the required style to a specific class name in the supply of JS calls, to avoid direct write style leads to Reflow/repaint.

5. Small recommendations

For directory organization:

Directory Organization--
Consider the idea of combining Bootstrap with Yaml/blueprint.

A. Compress common base styles into one file.
B. Pull off the unnecessary component style into a separate CSS, load on demand.

"Tuning Point"
Reduces the size of a single global_min file.

"Weighing points"
You need to consider the excessive number of requests that may result from this.

hack--
According to the actual situation, can consider the hack file for IE6 separately.

"Tuning Point"
Facilitates large differential processing of low-level browsers and reduces redundant code for advanced browsers.

For CSS Specifications:
CSS Prefix--
Consider trying the NEC approach by agreeing to "single letter _xxx" as a common-style identity, canceling a single common prefix, dividing the public modules by using different letters as top-level prefixes.

"Tuning Point"
Remission of the "common prefix _ Component prefix _ Component name" Multilevel prefix, by using the class name format as the identity, instead of the original public prefix role.

"Weighing points"
Still need to be considered according to the actual project.

Division of Classes--
Consider agreeing to unify several functional class names (class names with attributes as granularity), such as element-hidden class names, and supply JS calls.

"Tuning Point"
The deduction lets the development direct writes the style inline CSS, causes the page the Reflow/repaint.

Advanced CSS Selector--
You can consider using a more advanced CSS selector when refactoring a mobile-side page.
Example: [class^= "icon"],:first-child,:nth-child (n) ....

"Tuning Point"
Save the class name compared to the traditional method.

For graphics:
Consider the agreement with the designer, visual effects within acceptable range, some of the effects using CSS3 implementation, the lower-level browser to achieve graceful demotion.

"Tuning Point"
Reduce the use of pictures in large quantities, save bandwidth and number of requests.

At last

With the continuous emergence of new technologies, more and more excellent CSS frameworks appear in front of us, where the analysis of limited coverage, not one of the comparison and in-depth exploration, if there are deficiencies, please make a point of communication.

Tencent Isux (http://isux.tencent.com/css-framework.html)