Object-Oriented Programming with XHTML and CSS

<br />If only XHTML and CSS were object-oriented. . The sun should be rising from the north. However, we should look at everything from an OO perspective, and that will barely make up the numbers. In fact, someone proposed OO-style as early as a few years ago, but it can no longer be found.
So how do we do it? Now everyone knows that CSS can be written like this:
.G_G { /* xxxxxx */ }
We can think of it as a prototype , or a class , -__-b seems to be a class, and then we need to "instantiate" an object in HTML, for example:
<div class="G_G">Stupid ah ah</div>
The element will use the corresponding CSS definition, but the corresponding class alone is not enough, because our page may apply this class in multiple places. In order to handle the " private " relationship well, change the previous code to:
<div id="aoao" class="G_G">Stupid aoao</div>
In this case, the element with ID aoao will apply the definition of the .G_G class, and can use the selector #aoao{} to enter the definition of private effects, which will not affect the public .G_G class. At the same time, the priority of the #aoao definition will be higher than that of .G_G, which is in line with the common sense that private definitions take precedence over public definitions^^.
Since I used ID, a unique thing, the reuse of this privately defined thing became a problem (an ID can only appear once on a page, I don't know who said it, but it's the truth anyway). What if we want to implement multiple privatized things? Then we must implement " polymorphism ". Dig haha. Change the code again:
<div class="G_G o_O">Stupid ah ah</div>
One is "G_G" and the other is "o_O", but if we use .o_O{} , we can also define the element if the CSS is like this:
.G_G {width:100%} .o_O {color:#123456}
The elements will all be defined, and since definitions do not cascade, they will all be applied. If the code is like this, I wonder if it will be easier to understand.
<div class="layout color">Not a fool, owl</div>
.layout{width:100%} .color{color:#123456}
Next, we need to implement " encapsulation ". The child selector should be used frequently, change the code:
<div class="G_G"><span class="bendan">Stupid</span> Ouch</div>
Although both .bendan{} and .G_G .bendan{} can be defined, the latter can only be applied to elements with class "G_G". We can simply understand .bendan{} as a global definition and .G_G .bendan{} as a local definition, which will be beneficial to the modularization of our XHTML and CSS. ^^The legendary "encapsulation" appears, and then follows.
<div id="aoao" class="G_G o_O"><span class="bendan">Stupid</span> Aoao</div>
Such code can produce countless changes. If you still don't understand it, start from the beginning. ^^
In fact, these are still a long way from true object-oriented. I am just learning the clickbait, but it can be used to understand the application of ID and class.

<<: Docker stop stops/remove deletes all containers

>>: Example of making a butterfly flapping its wings with pure CSS3

Differences between proxy_pass in two modules in nginx

Object-Oriented Programming with XHTML and CSS

Differences between proxy_pass in two modules in nginx

MySQL cleverly uses sum, case and when to optimize statistical queries

What are the similarities between the development of web design and western architecture?

Docker's health detection mechanism

How to set mysql to case insensitive

Using Zabbix to monitor the operation process of Oracle table space

How to dynamically add a volume to a running Docker container

Nginx memory pool source code analysis

MySQL 8.0.20 installation and configuration method graphic tutorial under Windows 10

CentOS 6.5 configuration ssh key-free login to execute pssh command explanation

Recommend

Detailed explanation based on event bubbling, event capture and event delegation

Summary of events that browsers can register

Detailed tutorial on installing MariaDB on CentOS 8

An article to understand MySQL master-slave replication and read-write separation

Solution to nginx not jumping to the upstream address

A tutorial on how to install, use, and automatically compile TypeScript

Summary of Linux system user management commands

Two ways to exit bash in docker container under Linux

Information transmission and function calls between WeChat mini program pages and components

Tutorial on downloading, installing, configuring and using MySQL under Windows

Detailed explanation of Nginx http resource request limit (three methods)

React's reconciliation algorithm Diffing algorithm strategy detailed explanation

Detailed explanation of TypeScript's basic types

How to install php7 + nginx environment under centos6.6

JS+Canvas draws a lucky draw wheel