Discussion about CSS framework

I’ve seen a lot of introductions to CSS frameworks recently. I said something a few days ago: “In my limited field of vision, I haven’t seen anything that can truly be called a CSS framework~”, of course it could be me. My field of vision is too small, or the world is too big. I still feel that there are a lot of things that I cannot see.

Let’s first look at a concept that I agree with:

Frameworks can be divided into two frameworks: White-Box and Black-Box.

　 Frameworks based on inheritance are called white-box frameworks. The so-called white box has visibility, and the internal implementation details of the inherited parent class are known to the subclass. Application developers who utilize white-box frameworks develop systems by deriving subclasses or overriding member methods of parent classes. The implementation of a subclass depends heavily on the implementation of the parent class, and this dependency limits the flexibility and completeness of reuse. But the way to solve this limitation can be to only inherit the abstract parent class, because abstract classes basically do not provide concrete implementation. The white-box framework is a program skeleton, and user-derived subclasses are accessories to this skeleton.

　The framework based on object component assembly is a black box framework. Application developers obtain system implementation by sorting and assembling objects. Users only need to understand the external interface of the component and do not need to understand the specific internal implementation. In addition, assembly is more flexible than inheritance and can be changed dynamically. Inheritance is only a static compile-time concept.

　In an ideal situation, any required functionality can be obtained by assembling existing components. In fact, the available components are far from meeting the needs. Sometimes it is more efficient to obtain new components through inheritance than to assemble new components using existing components. Easy, so white box and black box will be used in the development of the system at the same time. However, white box frameworks tend to develop towards black box frameworks, and black box frameworks are also the ideal goals that system development hopes to achieve.

　Look back at the many CSS frameworks on the Internet today (YUI is called "YUI Library CSS Tools" and not "YUI CSS Frameworks"). How many of them are actually written with the concept of a framework, and how many of them just define style base classes? . Of course, everyone’s understanding of the framework may not be the same, and you may not agree with what I say.

　 Let’s talk about the CSS framework again. It’s not that I don’t recognize the existence of this thing. I have been trying such things since a year or two ago. For large websites, front-end development requires a solution. The framework is naturally the first choice. It's a pity that it's too far away from me, I'm too weak T_T, I only need two points:

　 Something to manage the following content
　 Class/component
　 Obviously, the first point cannot be done by CSS, and the second point, compared to other things The language is very weak.

When I was working on a medium-sized website about a year ago, to be lazy, I thought of modularizing the content and letting programmers put together pages. The general direction is to encapsulate one functional block after another. Programmers only need to use the corresponding HTML and CSS when they want to use which piece of content. It is convenient for everyone. I don’t need to spell the page. He doesn’t need to repeat the code. Hello everyone. It's really good.

　 It is normal for similar content blocks to be used multiple times on the same website. This also makes modularization possible, such as a picture list, perhaps a list of user avatars, or a list of group icons. How would you write it? Is the same used like this?

　.photoListUesr,.photoListGroup{ /*_*/ }

　 This doesn’t mean it’s not possible, but what if you suddenly want to add a similar one? You may need to adjust the style at this time. and I? We have tried using it this way:

In this case, we separate out the common expressions from the beginning, use .photoList as the prototype, and handle the details through additional classes. A few days ago, I wrote about object-oriented XHTML and CSS programming. In fact, I only wrote half of it. The other half was detailed examples, but I didn’t finish it because I had to do too many examples and the core was already written. ^^ Of course , this also has certain problems, that is, the definition of the initial prototype must be very careful, and try to ensure that even if it is revised in the future, it may not need to be modified. With CSS, basically a framework can only fit one website at most. Of course, if the website is large enough, it makes sense to use it this way.

　The more modular HTML and CSS become, the more dispersed the files become, and the more serious this problem becomes. HTML is easy to handle, since the application will eventually merge and output one copy, but CSS is usually discarded and used directly. If in the example just now, the way to import CSS into the web page is like this:

　 @import url(/xxx/photoList.css);
　 @import url(/xxx/UserCt.css);
　 @import url(/ xxx/GroupCt.css);

　You can even consider using a program to combine pages, but it is easy to use and proportional to the number of requests. Generally, everyone will choose to merge files manually. Although the human brain is more intelligent than a computer, in many cases the computing power of the human brain is not as good as that of a computer. I once had the idea of ​​using a server-side program to handle the CSS release mechanism. The general direction is to analyze the usage of various pages of the entire site through website access logs, and use the program to calculate which public uses need to be merged. The order (the order of CSS files will affect the priority), etc. Various calculations and compressed output.

　Unfortunately, such a complex program may only be suitable for one website, or a group of websites in the same series. Although it is a bit troublesome to do, I believe it is necessary to use this method for portal-level websites. Of course, the premise is that the entire team must use the same design pattern.

PS: The above CSS publishing program is just my fantasy. I haven’t tried it yet. Interested friends can try it. If there are any accidents, we will not be responsible.

　Of course, the above cannot be called CSS Frameworks, perhaps it can only be called a system-level solution. After all, CSS is just a descriptive language.

When Yueying and I were having roast duck last night, we talked about this and he asked me if I had an integrated front-end solution. The same problem will be faced when JS is componentized, and similar publishing mechanisms should also be applicable to JS. But I haven’t thought of a completely integrated solution yet. Maybe Yueying will treat me to roast duck a few more times and I can figure it out.

The above is the discussion about the CSS framework. For more related articles, please pay attention to the PHP Chinese website (m.sbmmt.com)!