Use Sass to write object-oriented CSS code

Since 2008 Nicole Sullivan proposed object-oriented CSS (OOCSS) since. It becomes a leading modular system for organizing your CSS code in one way.

Oocss is different from other organization CSS code methods, such as SMACSS or BEM. Make your modules reusable by separating the CSS code from the structure. In fact, I also usually confuse smacss with OOCSS.

Oocss, SMACC and Bem in the CSS is very content dongdong, has long been in the W3cplus site has related content science. It can be said that understanding these content will help you to organize, manage your CSS code or say CSS module better.

Today, I would like to discuss with you some of the basic principles of OOCSS. The main discussion with everyone is how to sass and oocss Better Together with some suggestions.

What is an object?

The vision is that this is a repetitive module that can be extracted independently of HTML, CSS, and Javasctrip to become an independent fragment--nicole Sullivan

To extract a CSS object The first thing to consider is how to separate styles from structs, and what is the best way to organize your code? Oocss's founder, Nicole Sllivan, raised two main principles:

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

Separation of containers from content: Do not insert styles into your HTML structure. In other words, try not to use an HTML tag or ID identifier in your style. Instead, you should define a class name to define the style, and the hierarchy of the selectors should be as small as possible.

Let's do a quick example

It may be difficult to apply these principles (understanding the theory is always a pain in the egg). Let's take a look at a simple example of how to organize code like this:

CSS code copy content to clipboard

/* 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's not hard to find that there are some repetitive styles appearing. In this example, the border style is defined in two classes. If you want to change Border-radius or border attribute values, you have to modify them in two places.

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

CSS code copy content to clipboard

* * a 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 this:

xml/html code to copy content to clipboard

　　

Lorem ipsum

　　

Lorem ipsum

Semantic and maintenance

You care that there is no semantics, and I am more concerned with the maintenance of the code. Let's say this example shows.

Pure CSS to define objects is not semantically, but there are some problems:

You need to modify the HTML each time you change style style

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 expand and is very handy for new content.

So we've written some CSS code to extend the HTML structure. Is this way really going to get better?

The arrival of Sass

I'm sure you've heard Sass's @extend command and know how he works. Therefore, thanks to the selector placeholder%placeholder, in sass can be extended through @extend, so that in CSS you can create some semantically class names, but also solve the problem of HTML.

We have to use%placeholder to create objects, call them in the class by @extend, and combine them together. This allows you to organize your own code:

CSS code copy content to clipboard

/* 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 @extend and base objects, so you can get a clean CSS object, which is very easy in sass, and we don't need to spend time modifying HTML.

CSS code copy content to clipboard

* * a 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. Keep in mind: @extend make your HTML the cleanest, and semantically, it's easy to sass.

I like to call it oosass because he is a mixture of oocss and sass. Of course, you don't have to use it. You can still use OOCSS if you are not deliberately pursuing semantics in HTML. Everyone has their own way, so how do you build your own CSS? Please share it with us.