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 might be mine. The field of vision is too small, or the world is too big. I still feel that there are still a lot of things that I cannot see.
Let’s first look at a concept that I agree with:
The framework can be divided into two types: White-Box and Black-Box.
Inheritance-based frameworks 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.
A 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 easier to obtain new components through inheritance than to assemble new components using existing components. Therefore, 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.
Let’s look back at the many CSS frameworks on the Internet today (YUI is called “YUI Library CSS Tools” rather than “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 and I'm too weak T_T. I only need two things:
Something to manage the content below
Class/Component
Obviously, the first point is that CSS cannot do it, and the second point is that it is very weak compared to other languages.
When I was working on a medium-sized website about a year ago, in order to be lazy, I thought of modularizing the content and letting programmers put together the 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 want to spell the page. He doesn’t need to repeat the code. Hello everyone. It's really good.
On the same website, it is normal for similar content blocks to be used multiple times. This also makes modularization possible, such as a picture list, a list of user avatars, or a list of group icons. At this time you will How to write it? Should the same words be written like this?
.photoListUesr,.photoListGroup{ /*_*/ }
This doesn’t mean it’s impossible, but what if you suddenly want to add a similar one? At this time, you may need to adjust the style. What about me? I tried using it like this:
<div class="photoList UesrCt" />
<div class="photoList GroupCt" />
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 fragmented 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 station, or a group of stations 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 have not tried it yet. Interested friends can try it. If there is any accident, I 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 I was having roast duck with Yueying 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.