Shulou(Shulou.com)06/03 Report--

What is the way of OOCSS programming in CSS? aiming at this problem, this article introduces the corresponding analysis and solution in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

OOCSS is the object-oriented CSS, where the object refers to the element object in the page, which is quite different from the object-oriented in traditional programming, for example, there is no such thing as method, if you have to say, some additional class can be regarded as inheritance or interface and other things to achieve object differentiation. For example, the merchandise in the e-commerce website is a typical object, they not only have many common parts, but also have many differences, such as width and height, buttons, pictures, titles and other basic layouts are the same, while the margins, wireframe, background color, font size and so on are all different. Therefore, according to the guiding principles of OOCSS, we should write a product class and then add some class such as border, theme and so on to it to differentiate it:

CSS

.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, under the effect of the above two additional class, we can get four different product styles in html. With the increase of additional class, the style of product will increase exponentially. This is just a simple example, intended to point out the idea of OOCSS, but does not highlight its significance. Don't worry, let's take a look at the two major principles of OOCSS.

1. Separate container from content

The so-called container is the element that wraps the object, such as a div, which is often named wrap, container, body, and so on. So what does it mean to separate the container from the content? It's very simple, in a word, the content can be used anywhere. In other words, this should not happen:

CSS

.container .product {

...

}

The result is a significant reduction in reusability because it can only be used in this container. But this does not mean that we should throw all the styles we need into a separate class, for differentiation should be placed in a separate class, this is the essence of OOCSS.

For example, when we do not want to sacrifice too much performance, but also want to show off the waterfall, most of the front end will use column, similar to the swimming lane design. You want to say Oh no, this is fake pinterest, but who cares, users won't have time to drag the width of the browser to identify it, at least it won't be too stuck when there are a lot of products under IE. Ha, don't take it seriously, first divide it into several column, and then fill in the items according to the height. Let's take a look at the following code. I have omitted some styles to avoid misleading:

CSS

.column {

Height: auto

Width: 200px

}

.product {

Width: 180px

Margin-right: 20px

Margin-bottom: 10px

}

Looks good, each column 200px width, goods put into it, horizontal spacing should be large, vertical spacing should be smaller to look like column. But wait a minute, we always need a neatly placed list of items to see if they are correct. Maybe margin is not a necessary attribute of product, or at least it should be mutable. Let's pull it out:

CSS

.product {

Width: 180px

}

. vertical-product {

Height: 400px

Margin-right: 10px

Margin-bottom: 10px

}

. horizontal-product {

Height: auto

Margin-right: 20px

Margin-bottom: 10px

}

In this way, it has nothing to do with separating containers such as column or list from product, even if other forms of organization appear later, as long as the basic structure of product has not changed, it can be directly reused, just adding some ancillary styles to the new xxx-product 's class. In addition, this has the advantage that the design logic is placed in HTML, and CSS is more powerful.

What is style logic? Goods vary in height in the waterfall stream and high in the list, which is a style of logic, and if it is written in CSS in the form of a parent-son selector, it loses its freedom. On the other hand, it is very free and flexible to display different forms of product by choosing which subsidiary class to add in HTML. It is also worth saying that the margin-bottom is the same, but we should put it in our own class for the simple reason that they just happen to be the same accidentally, they are not the same bottom in the design logic, it is not repeated here, but looks the same. If you need to change one of the bottom later, sharing is very awkward.

two。 Separation of skin and structure

The second point is easy to understand, theme is the visual effect, even if the page is removed, it does not affect the skin; and the structure refers to the structure is not as abstract as HTML, because CSS is still a style, so the structure is only the relative page structure.

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

CSS

.product {

Width: 200px

Background: # F6F2F2

Border: 1px solid # C4A0A0

}

It looks good, but designers are megalomaniac, careful color adjustment, perfect match, will never let you use this only once, other modules of the page, sidebar and even header may use the same background color and frame, they may even be nested with each other. Well, this is actually designed for visual unity. After all, few design masters can hold more than 4 colors. So what we can do is not to add such a style to each class, but to bring it up as a separate class, because, as I said at the beginning, color is the source of chaos.

CSS

. main-bg {

Background: # F6F2F2

}

. main-border {

Border: 1px solid # C4A0A0

}

In this way, you can use the main design elements on the page at any time, and it is very easy to modify it, so you don't have to worry about missing anything. In addition, I divided the background and the frame into two class, the reason is that the design logic should be placed on the HTML, the background and the frame do not necessarily appear 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 is possible to put on two different elements because of the HTML structure.

OOCSS emphasizes class, writing each set of styles into a class for easy use in HTML, and many class can be combined to form an object. So if you want to write a set of UI as a style for development once and for all, I suggest using OOCSS for development. But it also has shortcomings, too much design logic in HTML, greatly liberalizing the choice of page development, if developers who write HTML can not well understand the structure of the whole set of CSS, it is easy to cause class confusion in HTML.

This is the answer to the question about how OOCSS programming in CSS is shared here. I hope the above content can be of some help to you. If you still have a lot of doubts to be solved, you can follow the industry information channel to learn more about it.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.