Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how to analyze the CSS class name design of Bootstrap. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

When building a CSS system like Bootstrap, it is very important to maintain the simplicity, stability and flexibility of the system. This is not easy, especially for large teams and projects, where the number of components can become quite large. To improve this situation, you might consider replacing chained class names with prefixed class names.

When using a chained class name scheme, you might write the CSS selector for a series of specific components as follows:

.success {...} .btn.success {.. } .alert.success {...}

Here we set up a global base class, .success, which may cover all the commonalities between the success button and the success prompt box. Then, at the single component level, we need to extend or cover it. However, this completely open class name and chained style poses some troubles and potential pain points for developers:

What exactly does this basic class represent?

Which elements will be affected at the root level? )

Which elements can link the .success class to themselves?

Can it be further extended to more components?

What if one example of success uses green words on a white background and the other uses white words on a green background?

And these problems are just the tip of the iceberg. This solution may not be very bad, but if scalability, simplicity, and flexibility are your requirements, this may not be the solution. At this point, the prefix class name scheme may be more suitable for you.

Prefixed class names lead developers into a simpler and more maintainable direction to build an extensible CSS system. When we abandon the regular base class approach and limit the style of each component with a prefix, our code looks like this:

. btn-success {...}. Alert-success {...}

In this way, the base class is set at the component level, not at the entire system level. In other words, our base classes become .btn and .alert instead of .success. There is no style and behavior interference between all components, because we regard the "success state" of components as a concept throughout the system. That is to say, the style of each component in the "successful" state is common only at the conceptual level, while how to implement the style is constrained within each separate component. You don't have to worry about where the generic style will be used, and you don't have to worry about unexpected side effects, which makes each component more stable and flexible.

Building components is a very strategic and detail-oriented work. In a Bootstrap-like system, components need to be inherently independent to improve module separation and customization. In this way, we create better code and a pleasant project.

My experience from the perspective of the author

In the CMUI version, I basically use the "chained class name" style at the beginning of the article. For example, the structure of a large button might look like this:

Large button

In Bootstrap, similar elements look like this:

Large button

At first I didn't see any difference between the two-the former class name is used to mount the frame's predefined button style, and the latter class name is used to specify the size of the button. Replace all the. Btn-lg in the Bootstrap source code with .cmBtn.cmLarge, isn't it the same as my CMUI? I even think the class naming of Bootstrap is a bit verbose, isn't the btn- in .btn and .btn-lg repeated? Or CMUI is neat!

However, after reading this article, I seem to realize the benefits of Bootstrap's design. My understanding may not be the starting point of the original author, but I might as well list it for reference only.

User perspective

The difference between the two styles of class names lies not in how the source code is written, but in how developers (in this case, developers using Bootstrap) react when they see the class name. My understanding is that different names have different implications for developers.

Developers do not always write structural code for components according to the examples in the component documentation. For example, sometimes they don't have a document on hand (or they don't want to find it), or the style they expect is not listed in the document. They may try to modify or combine several class names with a try in order to produce some new style effect.

If the class name is broad (such as .cmLarge in CMUI), it's easy to try-for example, a developer will add a .cmLarge class to a ul.cmList element and expect a large list, but CMUI doesn't actually provide such a combination! This undermined the developer's expectations and led to psychological frustration that eventually abandoned the component library (exaggerated a little bit).

But if the class name is qualified by a "component-level" prefix (such as. Btn-lg in Bootstrap), it is highly unlikely that it will be combined into other components by developers. Even if some whimsical developer tries to change the. btn-lg to. Dropdown-lg and apply it to a drop-down menu, he should be ready when he fails.

From this point of view, Bootstrap's approach does have its advantages, and my CMUI 2.0 might as well give it a try.

The above is the editor for you to share how to analyze Bootstrap CSS class name design, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.