What you learned by using 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 Organization2. CSS Specification3. Graphics4. How to Apply5. Small suggestions1. Directory organization in the analysis of the directory Organization we refer to the organization of the Bootstrap, Blueprint, Yui, Yaml four frames 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 that we usually call+The component style. As you can see, the 4 frames on the directory schema basically follow the basic style+user-defined extended styles are organized in a general way. 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 in the form of a separate introduction of hack files, 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. The common modules in the prefix frame 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: The direct module name, which requires the definition of a keyword. The public module is a button that starts with btn–, and the image is img-start. 3. NEC: A single letter begins 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. The Division of Class classification in the framework of the main 2 kinds of standards, namely: "Component for the granularity", and "attribute for the 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. 2The 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 provided with the relevant class name, in the JS development phase of the development will be directly inline style on the corresponding element (this will trigger repaint/reflow), so the better way is to develop a class name with JS to trigger the display/hidden Action, in this case, to give Display:none a specific class name, the supply of development calls will appear very useful. Therefore, it is more important that we analyze the actual situation and give the best solution. C. Component class name composition style of the component, basically the base class name+extend the routines of the class name to change the composition. 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: here is a conventional combination, no longer 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 are icon-as a prefix. In CSS, Bootstrap uses the substring matching attribute selector. [class^="icon-"The advantage of using this is that, for the icon class tag, we no longer need to add a common class name for the icon, only the class name is the icon-you can match all icons at the beginning, saving a class name. Using this method can reduce the cost, but only in the IE7+Browser is applicable, if you want to use this class selector, consider whether you need 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. 4How the application is used in reference instances is consistent with the way we use them in our usual projects. In the way of application, there are generally two ways. 1for styles with component granularity: Flatten your own page modules according to the HTML structure of the component, and then assist in adding custom class names to control their personalization. 2for styles with attribute granularity: The class name is spliced according to the desired style. Here are a few simple examples:1. With component granularity: For component overrides, take a regular custom class name override style, which is not covered here. 2. Take attributes as granularity: You can see, if the need for a style is a property to the granularity, that is, the corresponding class name into it, 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. And for functional actions, such as displaying/hidden elements, you can use this method flexibly, write the desired style to a specific class name to provide JS call, avoid writing directly to the style cause reflow/repaint. 5. Small recommendations for Directory Organization: Directory organization-Consider combining Bootstrap with Yaml/Blueprint's thoughts. 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. Optimize points reduces the size of a single global_min file. The tradeoff point needs to consider the excessive number of requests that may be caused by this problem. 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 attempted, by agreeing that "single letter _xxx" is a common style identity, eliminating a single common prefix, and dividing the common modules by using different letters as top-level prefixes. The "Optimization point" reduced the "common prefix _ Component prefix _ Component name" Multi-level prefix, by the class name format as the identity, in lieu of the original common prefix function. "Trade-offs" still need to be considered in terms of project realities. Class Partitioning--you can consider the Convention to unify several functional class names (class names with attribute granularity), such as the class names that are hidden by the element, to supply JS calls. "Optimization Point" waiver allows development to write style inline CSS directly, resulting in page reflow/repaint. Advanced CSS Selectors-you might consider using a more advanced CSS selector when refactoring a mobile page. Example: [class^= "icon"],:first-child,:nth-child (N) .... "Optimization point" saves the class name compared to the traditional method. For graphics: Consider an agreement with the designer that the visual effects are within acceptable range, some effects are implemented using CSS3, and graceful downgrades are achieved for low-level browsers. "Optimization point" massively reduces the use of images, saving bandwidth and the number of requests. 

Original link: http://www.w3cfuns.com/article-1239-1.html

What you learned by using the CSS framework