Object oriented programming of XHTML and CSS

Time:2022-5-8

If XHTML and CSS can be object-oriented.. The sun should rise from the north. However, we should look at everything with the idea of OO, and we can barely make up for it. In fact, OO style was proposed as early as a few years ago, but it has not been found.
So how to OO? Now we all know that CSS can be written in the following way:
.G_G { /* xxxxxx */ }

We can look at it about oneprototype, orclass,-__- B it seems that it is a class, and then “instantiate” an object in HTML, for example:
< div class = “g_g” > idiot ow < / div >
This element will use the corresponding definition of CSS, but only the corresponding class is not enough, because our page may apply to this class in many places in order to handle it well“private”Change the code to:
< div id = “Aoao” class = “g_g” > idiot ow < / div >
In this way, the element with ID Aoao will be applied.G_GThe definition of this class, and you can use#aoao{}This selector is used to define the private effect, which will not affect the public effect.G_GThis class, at the same time, #aoao definition will have priority over G_ G is high, which conforms to the common sense that private definitions take precedence over public definitions.
Because I use ID, which is unique, the reuse of this privately defined thing has become a problem (an ID can only appear once on a page. I don’t know who said it. It’s the truth anyway). What if we want to achieve more than the same privatization? Then we must realize it“polymorphic”。 Dig, ha ha. Change the code again:
< div class = “g_g o_o” > idiot ow < / div >
One is “g_g” and the other is “o_o”, but if we use it.o_O{}It can also be defined to elements. If CSS is like this:
.G_G {width:100%}

.o_O {color:#123456}

Elements will be defined to, and since the definitions are not cascaded, they will be applied. If the code is like this, I don’t know if it will be better understood.
< div class = “layout color” > not a stupid bird < / div >
.layout{width:100%}

.color{color:#123456}

Next, we need to realize“encapsulation”。 You should often use the child selector. Change the code:
< div class = “g_g” > < span class = “bendan” > fool < / span > ow < / div >
although.bendan{}Follow.G_G .bendan{}Can be defined, but the latter can only be applied to elements with class “g_g”. We can simply.bendan{}Understood as a global definition.G_G .bendan{}Understand it as a local definition, which is conducive to the modularization of XHTML and CSS^^ The legendary “encapsulation” appeared, and then.
< div id = “Aoao” class = “g_g o_o” > < span class = “bendan” > fool < / span > ow < / div >
Such code can produce countless changes. If you don’t understand it, start from the beginning^^
In fact, these are still a long way from real object-oriented. I’m just learning the title party, but I can use it to understand the application of ID and class.

Recommended Today

2021, you still can’t waterfall layout? (three reliable JS schemes + n unreliable CSS schemes)

In the spirit of practicality, let’s share it todayWaterfall flow layout(Yesterday, a little brother asked me how to do it. I looked for it for a long time and didn’t find it. It was written on the intranet)。Demo address: http://www.lilnong.top/static/html/waterfall.html What is the waterfall layout? for instancePetal net、Mushroom Street(I’ll map it below). These websites use […]