Object-oriented programming for XHTML and CSS

If XHTML and CSS can be object-oriented ... The sun should rise from the north. However, everything should be with OO thought to look at the problem, but also reluctantly dine pull. In fact, as early as Zhougi years, some people put forward the oo-style, but have not been found.

How about OO? Now we all know that CSS can be a sample to write drop:

. G_g {/* xxxxxx/} We can take it around a prototype, or as a class,-__-b as if it were a class, and then "instantiate" an object in HTML, for example:

<div class= "G_g" > Idiot whining </div> this element will use CSS corresponding to the definition, but only the corresponding class is not enough, because our page may be applied to this class, in order to deal with the "private" relationship, Change the code you just made to:

<div id= "Aoao" class= "G_g" > Fool whining </div> So, this element with the ID AOAO will apply
. G_g
The definition of this class, and you can use the
#aoao {}
Such selectors go into the definition of a private effect, which does not affect the public
. G_g
This class, meanwhile, #aoao定义的优先权会比. G_g high, in line with the private definition than public definition priority high common sense ^ ^.

Because I used the ID this unique thing, the reuse of the things after this private definition became a problem (an ID can only appear once on one page, not knowing who said, anyway, truth). What if we want to achieve the same privatization? Then we have to achieve "polymorphism". Dug haha. Change the code again:

<div class= "G_g o_o" > Fool whining </div> one is "G_g" and the other is "o_o", but if we use the
. o_o{}
It can also be defined to elements, if CSS is the case:

. G_g {width:100%}
The. o_o {color: #123456} elements will all be defined, and will be applied because the definitions do not cascade. If the code is like this, I do not know if it will be better understood.

<div class= "Layout color" > Not stupid whining bird </div> layout{width:100%}
. Color{color: #123456} Next, you want to implement "encapsulation." Child selector You should always use it, change the code:

<div class= "G_g" ><span class= "Bendan" > Idiot </span> whining </div> although
. bendan{}
With
. 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, put
. G_g. bendan{}
Understood as a local definition, which would be beneficial to our XHTML and CSS modularity. ^^ the legendary "encapsulation" appeared, and then.

<div id= "Aoao" class= "G_g o_o" ><span class= "Bendan" > Idiots </span> whining </div> code like this can produce countless changes, Not clear from the beginning to look at. ^^

Actually, these are a lot of distance from the real object-oriented, I'm just learning the title party, but I can use it to understand the application of ID and class.