On the Oocss programming method in CSS

OOCSS is the object oriented CSS, here the object refers to the elements of the Page object, and the traditional programming of the object is not the same, such as the existence of a method of things, hard to say, some additional class can be seen as inheritance or interface to achieve object differentiation. For example, the Electronic business site of the commodity is a typical object, they have many of the same parts, and there are many differences, wide, buttons, pictures, headings and other basic layout are the same, while margins, wireframe, background color, font size, etc. are differentiated. In accordance with the OOCSS guidelines, we should write a product class and add some classes for border and theme to differentiate it:

CSS code copy content to clipboard

. Product {

Display:block;

Overflow:hidden;

Float:left;

width:200px;

Height:auto;

}

. product-head{...}

. product-body{...}

. product-foot{...}

. product-theme-black {

Background:black;

Color:white;

}

. product-border {

border:1px solid #333;

}

In this way, we can get 4 different product styles in HTML, with the addition of class added, and the product style will increase exponentially. This is just a simple example, intended to point out the concept of oocss, but does not highlight its significance. Don't worry, first look at the two principles of oocss.

1. Separation of containers and content

The so-called container is the elements of the package, such as a Div, we often named wrap, container, body and so on. So how is the separation of containers and content? Very simply, in a word, the content is available everywhere. That is, this should not happen:

CSS code copy content to clipboard

. Container. Product {

...

}

The result of this is that reusability is greatly reduced because it can only be used within the container. But that doesn't mean that we should put all the styles we need into a separate class, and it's the essence of oocss that differentiation should be placed in a single class.

For example, when we don't want to sacrifice too much performance and want a waterfall to show off, most of the front end uses column, like the design of the lane. You want to say oh no, this is pseudo Pinterest, but who cares, users will not have the time to drag and drop the width of the browser to identify it, in IE under the commodity more than at least not too card. Ah, don't be serious, first divided into several column, and then according to the height to fill in the goods, first look at the following code, I have omitted some of the styles to avoid misleading:

CSS code copy content to clipboard

. column {

Height:auto;

width:200px;

}

. Product {

width:180px;

margin-right:20px;

margin-bottom:10px;

}

Looks good, each column is 200px wide, the product puts in it, the horizontal spacing wants to be big, the vertical spacing is smaller just like column. But wait, we always need a neat list of items, right? Perhaps margin is not a necessary attribute of product, at least it should be variable. We pull it out:

CSS code copy content to clipboard

. Product {

width:180px;

}

. vertical-product {

height:400px;

margin-right:10px;

margin-bottom:10px;

}

. horizontal-product {

Height:auto;

margin-right:20px;

margin-bottom:10px;

}

This makes it irrelevant to separate containers such as column or list from product, even if there are other forms of organization, so long as the basic structure of the product is not changed, it can be reused directly, adding some subordinate styles to the new Xxx-product class. In addition, there is a benefit to this, the design logic in the HTML, CSS more powerful.

What is style logic? The commodity in the waterfall flow is high, in the list of high, this is a style of logic, if the form of a parent-child selector written in the CSS, it lost its freedom. HTML is very free and flexible when it comes to displaying different forms of product by choosing which subordinate class to add. It is also worth saying that Margin-bottom is the same, but we should each be placed in their own class, for the simple reason that they are just careless exactly the same, in the design logic they are not the same bottom, here is not duplication, but look the same. If you need to change one of these bottom in the future, sharing is very awkward.

2. Separation of skin and structure

The 2nd is easy to understand, the skin (theme) is the visual effect, even if the page is excluded is not what the impact is the skin, and the structure is not like HTML as an abstract structure, because CSS is still style, so the structure is only relative page structure.

Let's take a look at our product and add some background colors and borders:

CSS code copy content to clipboard

. Product {

width:200px;

Background: #F6F2F2;

border:1px solid #C4A0A0;

}

Looks good, but the designers are arrogant, careful color, perfect collocation, will not let you only use this time, the other modules of the page, sidebar even header may use the same background color and border, they may even nest each other. Well, this is in fact designed for visual unity, after all, not a few master designers can hold live 3, more than 4 colors. So what we can do is not to add such a style to each class, but to put it forward as a separate class, because, as I said at the outset, the color is the source of chaos.

CSS code copy content to clipboard

. MAIN-BG {

Background: #F6F2F2;

}

. main-border {

border:1px solid #C4A0A0;

}

This allows you to use the main design elements at any time in the page, and it's also very simple to change, without worrying about what's missing. In addition, I divided the background and the border into two classes, because the design logic should be placed in HTML, background and borders do not necessarily occur at the same time, the relationship between the two should be determined by the HTML, even if the design logic determines the binding of the two, It may also be possible to place the HTML structure on two different elements as it is implemented.

OOCSS emphasizes class, writing each group of styles into a class for easy HTML use, and many classes can be combined to make an object. So if you want to write a set of UI as a style for development, I recommend using OOCSS for development. But it also has drawbacks, too much of the design logic in the HTML, greatly liberalized the page development when the choice, if the developers write HTML can not well understand the entire set of CSS structure, more easily in the HTML create class confusion.