Web Optimization Tips

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.

Web Optimization Tips