CSS Schema Tutorial: OOCSS and SASS Combination

Article introduction: If you combine OOCSS and Sass, you will get two advantages: CSS module is not bloated and HTML remains unchanged.
OOCSS is great. But it is not terrible to have many class names that are not semantic in HTML tags. It is interesting that the class name on the HTML tag will change. If you combine OOCSS and Sass, you will get two advantages: CSS modules are not bloated and HTML remains unchanged.

OOCSS guides the maintenance of HTML
First, a simple statement. You may see the word non-semantic for the second time. In fact this is the case. I do n’t really care if he is "non-semantic". I care more about maintenance. Non-semantic classes cannot describe a component well, which means they will change.

So far, the only way to control modules with pure CSS is to define semantic class names. Then apply these class names to HTML elements. This is the way to create modules using OOCSS, but there are many problems:

I don't want to modify the HTML tags every time, but only want to trigger through CSS. Because I work for a startup company, I don't have much time to deal with these.
Even many times I ca n’t access the DOM elements, nor can I add the classes I need on the DOM elements. If you use JavaScript components to add elements to your page, you have no way to add class names inside this component.
In addition to HTML being unmaintainable, other aspects of OOCSS are completely correct. The only way to abstract and reuse modules in large projects is to maintain them with CSS. So what benefits do we get from this, and what are the disadvantages?

OOSass to save you
The combination of OOCSS and Sass will make you stronger. @extend allows you to directly inherit styles from another selector in Sass, instead of copying all the styles inside like @mixin. If you use nesting or selector nesting, @extend will make your style code bloated, but by comparison it is much more perfect.

Fortunately, a placeholder was added in Sass 3.2, unless you extend the placeholder selector, otherwise he will not generate any code. Here is a simple example of placeholders:

% separator {border-top: 1px solid black;} hr {@extend
% separator;} .separator {@extend
% separator;}
The compiled CSS

hr, .separator
{border-top:
1px solid black}
The
Placeholders will not produce bloated code like @mixin or @extend extension class selectors. This makes placeholders suitable for CSS to create non-semantic modules. I call this module patterns. They are small pieces of style code that you can mix and match in your style sheet.

Show a real useful example
Bring a golden case of OOCSS: .media module. You may want to apply the .media module to some of your components: .status, .profile, etc .:

 
.media is a classic module, you can refer to "CSS Make Facebook Media Objects" for details.

 
The thing is, if you don't want to reuse the .media module structure in your HTML. Especially because you have reused the .status and .profile component structures. At this time% placeholder plays a big role, here we define a% media:

% media {overflow: hidden; &: first-child {float: left;} &: last-child {overflow: hidden;}}
 
The structure used in the .status and .profile components is the same as the structure of the .media module. The detailed structure can refer to the Media object structure in Bootstrap.

 
Now you do n’t need to reuse .media on all elements, you just need to expand% media where you want to use:

.status {@extend% media; // Status-sepecific styles here ...} .profile {@extend% media; // Profile-sepecific styles here ...}
This means that in your HTML tags, you only need to define a semantic class name: .status and .profile, and do not need to consider adding a class name such as .media, as long as you have a corresponding Element tags without considering whether they exist.

This becomes flexible. If you decide that .status is not suitable for using the .media module, just open% media without using @extend in Sass. You don't need to delete the .media class name in the HTML tag.

As you may have noticed, I used a fine-tuned .media module. Even if you use JavaSctrip to insert components into the DOM, this module is also applicable.

OOSass uses JavaScript component styles to be simpler
The biggest problem is assuming that you can fully control your DOM and can add the class name you want for the DOM element. But this situation does not always exist. When you use JavaScript components or use other people's code to render, you can only touch the highest-level element components.

 
Especially in the use of JavaScript components to render pages or some CMS systems, you do not have the ability to add class names to related DOM elements. You will feel how impatient CSS is.

 
If you use DropdownView to add a .user-dropdown element to your page, you can add a class name .media to .user-dropdown, but you have no way to add .button or his .menu-item The class name because you cannot control the DOM elements inside this component.

But with Sass's% placeholders, this will no longer be the problem:

.dropdown {// Normal styles for very dropdown ...} .user-dropdown {// Extra styles for user-specific dropdowns… .menu-item {@extend% media;}}
What you want to do is how to make pure CSS class names work: insert components and destroy component closures, or use some API based on other string-based class names. But you can use Sass to easily control without directly controlling DOM elements.

Examples
I like reading other people's CSS patterns, so I want to share some of my own. Here are some CSS patterns that I use. These patterns are applied in Segment.io.

Lip
This is an Apple-style separator that creates a lip below a content (using% reversed-lip to create a style opposite to the lip):

% lip {clear: both; display: block; height: 5px; background: url ("/ public / images / patterns / lip / lip.png") no-repeat; background-size: 100% 100%;}% reversed -lip {@extend
% lip; background-image: url (/public/images/patterns/lip/reversed-lip.png);}
Valley
This is to add a lip at the top and bottom of an element to make it appear to be embedded in the surrounding area:

% valley {position: relative; overflow: hidden; & :: before, & :: after {content:
''; position: absolute; left:
0; right:
0;} & :: before {@extend% lip; top:
0;} & :: after {@extend% reversed-lip; bottom:
0;}}
Plane
It is a very simple rounded corner frame:

% plane {box-shadow: 0
2px 5px rgba ($ black, .1); border-radius: $ border-radius-medium;}% white-plane {@extend
% plane; background-color: $ white;}% off-white-plane {@extend
% plane; background-color: $ off-white;} ...
Seam
It is often seen that some people put a piece of black and a piece of white together and make them have a certain transparency. We often call this effect seam:

% seam {clear: both;
display: block;
height:
0px;
border-top:
1px solid rgba ($ black, .12);
border-bottom:
1px solid rgba ($ white, .15);
}
The
Well
The effect is similar to valley. This effect makes people look a little depressed, and is generally used in the <code> block:

% well {box-shadow: inset 0
1px 5px rgba ($ black, .14); border-radius: $ border-radius-medium;}% off-white-well {@extend
% well; background-color: $ off-white;}% light-gray-well {@extend
% well; background-color: $ light-gray;} ...
Now it is your turn
I hope to give you a good pattern idea and how to better use your CSS components.

They should only do one thing, they should do well. Harry Roberts mentioned that you should keep their names vague and non-semantic. Is that you have to make them suitable for your content, so you can use them anywhere. But you can create a pattern above them, like the valley example we saw earlier.

If I have my own CSS model, I look forward to seeing it.

Translator's Sign Language: The entire translation is carried out in accordance with the original line, and the individual's technical understanding is slightly added during the translation process. If there is something wrong with the translation, please let me know if you are traveling with you. Thank you!

Original English: http://ianstormtaylor.com/oocss-plus-sass-is-the-best-way-to-css/

Chinese translation: http://www.w3cplus.com/preprocessor/oocss-plus-sass-is-the-best-way-to-css.html