What you can learn from the CSS framework

Many people now use CSS frames to build stations quickly.

What is the CSS framework, which is usually a collection of CSS files that include basic layouts, form styles, grids, simple components, and style resets. Use CSS framework to greatly reduce the cost of work to quickly build a station.

Of course, for some large-scale projects, it may be difficult to copy the direct use of some frameworks, because direct use will bring some limitations or redundancy problems.

However, in the CSS framework has become increasingly mature today, in our design project structure, specifications, the current market some excellent framework can also provide us with a lot of places to learn.

This article mainly discusses from several aspects the CSS framework can use to our project reference point:

1. Directory organization
2. CSS specification
3. Graphics
4. How to Apply
5. Small Suggestions

1. Directory organization

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

When using a framework, we typically link the style of the desired framework itself to the page, and then modify it based on it. So the style of the frame itself can be understood as the underlying style. The global style + component style that we usually call.

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

However, if you follow the Bootstrap approach, it is possible to introduce the non-common component styles also included in the global style, if the component is also written in the global CSS, it is best to ensure that the component appears high frequency to introduce, avoid unnecessary bandwidth waste.

About hack:

As for the hack written for the lower version of the browser, the way in which it is handled, Blueprint and Yaml are processed using a separate introduction to the hack file, and I have tried this approach.

Personally, the advantage of this approach is that it avoids bringing redundant code to advanced browsers, and the introduction of CSS through conditional judgment does not bring additional requests to advanced browsers.

This method is more suitable for, high-low level browser is deliberately designed to have a large difference in the case, that is, hack more time to use. Otherwise it would not be advisable to introduce a document for a hack of ten lines.

2. CSS specification

A. Prefix

The common modules in the framework are prefixed with the following 3 ideas:

1. Yaml, Yui: In any case is a unified logo at the beginning, plus change the module name.

2. Bootstrap: Direct module Name, this method needs to define the keyword. The public module is a button that starts with btn–, and the image begins with img-.

3. Nec: Start with a single letter to identify the component.

In general, we apply a framework, we first introduce the frame style, and then overlay our own style, so we can think of the framework as our basic CSS.

We can draw on the framework prefix specification to plan our base CSS prefixes, according to the actual situation of our project to take different scenarios.

B. Division of Classes

The classification of classes in the framework of the main there are 2 kinds of standards, namely: "Component for the granularity", and "attribute for granularity".

1. component is 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 a property is required, the corresponding class name is called to assemble.

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

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

For example, some elements of the hidden, if not provide the relevant class name, in the JS development phase will be directly inline style on the corresponding element (this will trigger Repaint/reflow), so the better way is and JS Development convention a class name trigger display/hidden action, in this case , a specific class name is assigned to the Display:none, and it is useful to supply the development call.

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

C. Component class Name combination method

The component's style is basically the "base class name + extension class name" routine to make a combination change.

However, there are 3 ways in which selectors can be used, currently the most framework uses: Multi-class selection, by modifying the class name combination of HTML to achieve the restoration.

Take the implementation of the button style as an example:

This is a conventional combination, not to repeat.

D. Advanced CSS Selector

During the analysis of the Bootstrap, it was found that Bootstrap defined a series of icon names, all of which were prefixed with icon-.

In CSS, Bootstrap uses the substring matching attribute selector.

[class^= "icon-"]

The advantage of using this is that for the Icon class label, we no longer need to add a common class name for the icon, only the class name is icon-beginning to match all the icon, save a class name.

This can be reduced by a certain cost, but only in the ie7+ browser, if you want to use the class selector, consider whether you need a compatible IE6.

Although IE6 is not supported, the Advanced CSS selector is really appealing and can be used for mobile, so mention it.

3. Graphics

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

But the common denominator is that the newer frameworks today, for some simple effects, use CSS3 to implement some simple gradients and gracefully downgrade low-version IE.

4. How to Apply

In terms of how these frameworks are used in reference instances, it is basically consistent with the way we use them in our usual projects.

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

1. For a component-grained style:

Flatten your own page modules according to the component's HTML structure, and then assist in adding custom class names to control their personalization.

2. For a style with attribute granularity:

Splice the class name according to the style you want.

Here are a few simple examples:

1. Take the component as the granularity:

For component overrides, take a regular custom class name override style, which is not covered here.

2. Attribute-based granularity:

As you can see, if a style is a property with granularity, that is, the corresponding class name is called in, but in the actual project, because of 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 show/hide elements, you can use this method flexibly, write the desired style to a specific class name to provide JS calls, avoid writing directly to the style cause reflow/repaint.

5. Small recommendations for Directory Organization: directory organization--

The thought of combining Bootstrap with Yaml/blueprint can be considered.

A. Compress a file with a common base style compression.

B. Extract the unnecessary component styles into a separate CSS and load them on demand.

"Optimization Point"

Reduced the size of a single global_min file.

"Tradeoff Point"

You need to consider the excessive number of requests that can result from this.

hack--

Depending on the actual situation, you may consider separate the hack file for IE6.

"Optimization Point"

Facilitates large-scale differentiation of low-level browsers and reduces redundant code for advanced browsers.

For CSS Specifications: CSS Prefixes--

Consider the way Nec is tried, the Convention "single Letter _xxx" is a common style of identification, the elimination of a single common prefix, by a different letter as the top-level prefix, the common module is divided.

"Optimization Point"

The "common prefix _ Component prefix _ Component name" of the multi-level prefix, by using the class name format as the identity, instead of the original common prefix function.

"Tradeoff Point"

Still needs to be considered according to the actual project.

Division of Classes--

Consider the Convention to unify several functional class names (the class name with attribute granularity), such as the class name that the element hides, and supply the JS call.

"Optimization Point"

The waiver allows development to write directly to the style inline CSS, resulting in the reflow/repaint of the page.

Advanced CSS Selector--

You might consider using a more advanced CSS selector when refactoring a mobile page.

Example: [class^= "icon"],:first-child,:nth-child (n) ....

"Optimization Point"

Save the class name compared to the traditional method.

For graphs:

Consider agreeing with the designer that visual effects are acceptable, and some effects are implemented using CSS3, which gracefully degrades low-level browsers.

"Optimization Point"

Massively reduce the use of images, saving bandwidth and the number of requests.

At last

With the continuous emergence of new technologies, more and more excellent CSS framework appears in front of us, here the analysis of limited coverage, not one after the comparison and deep exploration, if there are shortcomings, please make a lot of communication.

What you can learn from the CSS framework