CSS style object-oriented ideology (1), css object-oriented

CSS style object-oriented ideology (1), css object-oriented

Let's talk about the object-oriented method of CSS styles today. As the name suggests, object-oriented is a feature of advanced languages, mainly for high reusability of programs and solving the coupling relationship between modules, so can scripting languages like CSS use object-oriented ideas to improve code maintainability and scalability? The answer is yes. Using object-oriented thinking to write CSS code can greatly improve the efficiency of front-end code.

Currently, a common CSS code organization method is: base.css + common.css + page.css. Such an organizational structure is easy to think of as a common three-layer architecture model, but there is a slight difference here. Transform is the style code for a specific page. Through this css code organization architecture, functions can be well abstracted, avoiding repeated code development, improving efficiency and facilitating maintenance. The architecture diagram of css code is as follows:

 

This section mainly describes how to compile the base-Layer Code. This layer will be referenced by all pages of the project and has nothing to do with the specific UI design (ignoring the Art Design). This layer must be simplified and general, high portability. Generally, the base layer includes the following settings:

1. CSS initialization settings

CSS initialization settings mainly provide some common css initialization functions, which are the default style of HTML tags, such: ul default indent style, em font skew, strong font bold, and commonly used * {margin: 0; padding: 0 ;}

 2 Text Layout

Text layout is a concise set of font styles, the report font size, high line; for example: f10 {font-size: 10px ;}
F13 {font-size: 13px ;}

3 Positioning

Locate and set attributes such as center, float, and postition;

Example: fl {float: left ;}
Fr {float: right ;}

4 length and height

The length and height are mainly set to width and height;

Example: w10 {width: 10px ;}
H10 {width: 10px ;}

 5 margin

Margin mainly sets the margin and padding values;

Example: m10 {margin: 10px ;}
P10 {padding: 10px ;}

So, how can we change our thinking and write css styles to define the above style? First, let's look at a common css style Writing:

Example 1: We have three p elements. I want 1st TO BE: 50*50, the text is 10px, the second to 100*100, the text is 13px, and the third: 200*200, the text is 15px; how should I write a traditional c style?

<P class = "pClass1"> 11111 <p>

<P type = "pClass2"> 22222 <p>

<P type = "pClass3"> 333333 <p>

The CSS code is as follows:

. PClass1 {width: 50px; height: 50px; font-size: 10px; background-color: # FF0; border: #000 solid 1px; position: relative; float: left ;}
. PClass2 {width: 100px; height: 100px; font-size: 13px; background-color: # 0CF; border: #000 solid 1px; position: relative; float: left ;}
. PClass3 {width: 200px; height: 200px; font-size: 15px; background-color: #9F9; border: #000 solid 1px; position: relative; float: left ;}

Let's take a look at the labeled code. Here is the css style section for setting our requirement. Now we want to add another condition:

Add another p element, the style is 200*100, and the text is 15px. How can this element be added?

Obviously, this is the case: 1 add HTML: <p class = "pClass4"> 444444 <p>

2. Add CSS:

. PClass4 {width: 200px; height: 100px; font-size: 15px; background-color: #9F9; border: #000 solid 1px; position: relative; float: left ;}

Everyone must have discovered that this code is only doing some repetitive code work. Obviously, it does not conform to the object-oriented idea, can we combine these functions in layers and write them using modular ideas? Well, let's give it a try:

First, we compile a general CSS basic class (that is, base.css). The style code is as follows:

. W50 {width: 50px;}. h50 {height: 50px;}. f13 {font-size: 13px ;}

. W100 {width: 100px;}. h100 {height: 100px;}. f15 {font-size: 15px ;}

. W200 {width: 200px;}. h200 {height: 200px;}. f18 {font-size: 18px ;}

. PClass {border: #000 solid 1px; position: relative; float: left ;}

HTML section:

<P class ="W50 h50 f13 pClass& Quot;> 11111 <p>

<P class ="W100 h100 f15 pClass& Quot;> 22222 <p>

<P class ="W200 h200 f18 pClass& Quot;> 333333 <p>

Note that in order to better illustrate the problem, I have unified the color values here. Here we find that the class writing method is different, and one is used."Modular"This is the essence of CSS object-oriented. That is to say, we can use the existing CSS styles like building blocks without having to generate a style through great modifications, so let's implement pClass4:

You only need to write an HTML file: <p class ="W200 h100 f15 pClass& Quot;> 44444 <p>

Let's take a look at the effect. Do you understand the object-oriented meanings mentioned above?