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

This article shows you how to use Sass to write object-oriented CSS code, the content is concise and easy to understand, can definitely brighten your eyes, through the detailed introduction of this article, I hope you can get something.

Since Nicole Sullivan put forward Object-Oriented CSS (OOCSS) in 2008. It becomes one of the leading modular systems used to organize your CSS code.

OOCSS is different from other organizations' CSS code methods, such as SMACSS or BEM. Make your module reusable by separating the CSS code from the structure. In fact, I usually confuse SMACSS with OOCSS.

OOCSS, SMACC and BEM are very meaningful things in CSS, and they have long been popular on W3cplus sites. It can be said that understanding these contents will help you better organize and manage your CSS code or CSS module.

What is the object?

In vision, this is a repetitive module, which can extract HTML, CSS and JavaSctrip independently into a separate fragment-- Nicole Sullivan.

The first thing to consider when extracting a CSS object is how to separate the style from the structure. What is the best way to organize the code? Nicole Sllivan, founder of OOCSS, proposes two main principles:

Structure and style separation: you should define the structure and location in the object, while style properties should be separated using class names, such as background or border. So you don't have to cover some characteristic styles.

Separation of containers from content: do not insert styles into your HTML structure. In other words, try not to use html tags or id identifiers in your style. Instead, you should define some class names to define the style, and the level of nesting of the selector should be as small as possible.

Let's make a quick example.

It may be difficult to apply these principles (it always hurts to understand the theory). Let's look at a simple example of how such code is organized:

CSS Code copies content to the clipboard

/ * in a bad way * /

.box-1 {

Border: 1px solid # ccc

Width: 200px

Height: 200px

Border-radius: 10px

}

.box-2 {

Border: 1px solid # ccc

Width: 120px

Height: 120px

Border-radius: 10px

}

It is not difficult to find that there are some repetitive patterns. In this example, the border style is defined in both classes. If you want to change the value of the border-radius or border property, you have to change it in two places.

To solve this problem, put this style in another newly added class name:

CSS Code copies content to the clipboard

/ * good way * /

.box-1 {

Width: 200px

Height: 200px

}

.box-2 {

Width: 120px

Height: 120px

}

. box-border {

Border: 1px solid # CCC

Border-radius: 10px

}

In the HTML structure, we can use:

XML/HTML Code copies content to the clipboard

Lorem ipsum

Lorem ipsum

Semantics and maintenance

You care about semantics, but I'm more concerned with code maintenance. As shown in this example.

There is no semantics to define objects in pure CSS, but there are some problems:

Every time you change the style, you need to change the HTML

There is no secure way to access DOM elements

For OOCSS, except for the difficulty of maintaining HTML, everything else is perfect. Our CSS is easy to extend and easy to use in new content.

So we wrote part of the CSS code to extend in the HTML structure. Will it really get better in this way?

The arrival of Sass

I'm sure you've heard Sass's @ extend command and how he works. Therefore, thank you very much for the placeholder% placeholder of the selector, which can be extended with @ extend in Sass, so that you can create some semantic class names in CSS and solve the problems in HTML.

We must use% placeholder to create the object and call it in the class through @ extend to put it together. This allows you to organize your own code:

CSS Code copies content to the clipboard

/ * in a bad way * /

A.twitter {

Min-width: 100px

Padding: 1em

Border-radius: 1em

Background: # 55acee

Color: # fff

}

Span.facebook {

Min-width: 100px

Padding: 1em

Border-radius: 1em

Background: # 3b5998

Color: # fff

}

All objects are mixed with the base object using @ extend, so you can get a clean CSS object, which is very easy in Sass, and we don't have to spend any more time modifying HTML.

CSS Code copies content to the clipboard

/ * good way * /

% button {

Min-width: 100px

Padding: 1em

Border-radius: 1em

}

% twitter-background {

Color: # fff

Background: # 55acee

}

% facebook-background {

Color: # fff

Background: # 3b5998

}

.btn {

&-- twitter {

@ extend% button

@ extend% twitter-background

}

&-- facebook {

@ extend% button

@ extend% facebook-background

}

}

Semantic, perfect? Sass solved our always. Remember: @ extend keeps your HTML clean and semantic, which is easy in Sass.

I like to call it OOSass because it is a mixture of OOCSS and Sass. Of course, you don't have to use it. If you are no longer deliberately pursuing semantics in HTML, you can still use OOCSS. Everyone has their own way, so how do you build your own CSS? Please share with us.

The above is how to use Sass to write object-oriented CSS code. Have you learned any knowledge or skills? If you want to learn more skills or enrich your knowledge reserve, you are welcome to follow the industry information channel.

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.