Object-oriented programming of XHTML and CSS

If XHTML and CSS are object-oriented .. The sun should have risen from the north. However, everything should look at the problem with the idea of OO, and we can barely pull together. In fact, some people proposed OO-style as early as a few years ago, but they cannot find it. Webpage Tutorial network

So how OO? As we all know, CSS supports sample writing:

Webpage Tutorial network

. G_G {/* xxxxxx */} we can look at it as a prototype or a class.-_-B seems to be a class, then you need to "instantiate" an object in HTML, for example:

<Div class = "G_G"> dumb implicit </div> This element uses the corresponding CSS definition, but only the corresponding class is not enough, because our page may be applied to this class in multiple places, in order to handle the "private" relationship, change the code just now:

<Div id = "aoao" class = "G_G"> stupid Hacker </div> In this case, the elements whose ID is aoao will be applied.
. G_G
Definition of this class, and can be used
# Aoao {}
This selection operator is used to define the private effect, which will not affect the public
. G_G
This class, at the same time, # The priority defined by aoao will be higher than. G_G, in line with common sense that the private definition is higher than the public definition ^.

Because I use the unique ID, reuse of this private definition becomes a problem (an ID can only appear once on a page, but I don't know who said it, it is truth ). What should we do if we want to achieve many things with the same privatization? Then we must implement "polymorphism ". Digging haha. Modify the code again: Webpage Tutorial network

<Div class = "G_G o_O"> dummies and tricks </div> one is "G_G" and the other is "o_O", but if we use
. O_O {}
You can also define elements, if CSS is like this:

 

. G_G {width: 100%}
The. o_O {color: #123456} element will be defined and will be applied because the definition is not stacked. If the code is like this, I don't know if it will be better understood.

<Div class = "layout color"> not Dummies </div> Webpage Tutorial. layout {width: 100%}
. Color {color: #123456} then, we need to implement "encapsulation ". The sub-level selector should be used frequently. For code:

<Div class = "G_G"> <span class = "bendan"> dumb </span> Margin </div>
. Bendan {}
And
. G_G. bendan {}
Can be defined, but the latter can only be applied to elements whose class is "G_G".
. Bendan {}
As a global definition
. G_G. bendan {}
It can be understood as a local definition, which facilitates the modularization of XHTML and CSS. ^ The legendary "encapsulation" appears, and then proceed.

<Div id = "aoao" class = "G_G o_O"> <span class = "bendan"> Dummies </span> have nothing to do </div>. changed, you can start from scratch. ^

In fact, there is still a long distance between these and the real object orientation. I am only learning about the title party, but I can use it to understand the application of ID and class.