On the oocss and smacss design patterns of CSS programming

It's not hard to write CSS, but it's harder to write CSS that can be maintained than other programming languages. Fortunately there have been many masters of the characters, put forward a lot of design patterns and thinking, by standing on the shoulders of giants can make things easier. This article is about OOCSS, SMACSS, and the rules to be aware of when composing CSS.

(the example in this article is SCSS syntax)
Oocss

OOCSS is not a new technology, just a design model for writing CSS, or a "moral code", roughly I think there are only two points:

1. Reduce reliance on HTML structures
   Increase the use of CSS class repeatability

Reduce reliance on HTML structures

CSS code to copy content to clipboard

1. <nav class= "Nav--main" >
2. <ul>
3. <li><a>.........</a></li>
4. <li><a>.........</a></li>
5. <li><a>.........</a></li>
6. </ul>
7. </nav>

General navigation bar Writing, the structure should be like the above HTML example, if you want to define the style of those <a> tags, CSS can be written. Nav--main ul Li a {}, this kind of writing regardless of the effectiveness of the problem, you can see that excessive reliance on the structure of the element tag, It is possible that after the HTML structure changes, the CSS must be refactored, resulting in redundant maintenance costs.

From this example to consider, in principle <a> will certainly be followed by the <li> tag, a <li> will only have a <a>, usually do not exist independently, it can be written. Nav--main a {}, it would be better to write, Even add class Nav--main_item directly to <a>. The latter is the use advocated by OOCSS.

This way of writing, the effectiveness of the theory is relatively good (I can not verify), and secondly, the level is relatively simple.
Adding CSS class Reuse

In Oocss's view, the emphasis is on reusing class, and you should avoid using IDs as a selector for CSS. The idea is like
Oop
Try to draw away from duplicate code, such as the following example, which is the CSS style attribute of both buttons:

CSS code to copy content to clipboard

1. . button {
2. Display:inline-block;
3. PADDING:6PX 12px;
4. Color:hsla (0, 100%, 100%, 1);
5. &.button-default {Background:hsla (180, 1%, 28%, 1);}
6. &.button-primary {Background:hsla (208, 56%, 53%, 1);}
7. }

The CSS above will have two different styles of button, pulling out of the repeating part, and defined in the same class
On Therefore, to use such a style, HTML may be written in this way:

CSS code to copy content to clipboard

1. <a class= "button Button-default" >
2. <a class= "button Button-primary" >

Use the button to declare this as a style of the buttons, and then use Button-default or button-primary as the difference between the button background. This can be done to maintain a lower cost, for example: To change the size of all the buttons on the site, just modify. Button padding.
Smacss

My understanding of smacss is not very deep, perhaps scalable and Modular architecture for CSS after reading will have a deeper understanding. The current concept of SMACSS is limited to the way it divides the different business logic of CSS:

But I think the original design is not very appropriate, so I made some improvements:
Base

Base is to set the default value of the label elements, such as the browser reset can be written here, if the use of Compass, as long as @include global-reset can be. This only sets the label element itself and does not appear with any class or
ID, but you can have a property selector or a pseudo class:

CSS code to copy content to clipboard

1. HTML {}
2. Input[type=text] {}
3. a:hover {}

Layout

Layout is the appearance of the "Big architecture" of the entire site, not the class of a small component such as a button. The site usually has some major chunks, perhaps header or footer,layout, which is used to define these "big schemas" of CSS. If you do responsive Web design or use Grid System, write the rules in Layout.

Here's an example:

CSS Code copy content to clipboard

1. #header {margin:30px 0;}
2. #articles-wrapper {...;}
3. . sidebar {
4. &.sidebar--rightright {...;}
5. &.sidebar-left {...;}
6. }

There is usually only one selector, one ID, or one class.
Module

The original smacss to module design I feel not very good, so I obstinately will module
Split a Partial.

The Module here, as the name suggests, can be reused elsewhere, and if you're looking for a more specific example, I think it's like Twitter Bootstrap components
, or as in the previous Oocss. Button This will be reused component modules.

Modules do not need to use any prefix, because module is designed to be used repeatedly on different page.
Partial

Partial is different from latout, and unlike Module, he is smaller than the Layout range and may be
A child element underneath the header. Unlike Module, he is a special setting in a particular single field.

CSS code to copy content to clipboard

1. . nav--main {
2. a {........;}
3. }

The Partial name is usually added to the child class as a prefix, for example. Nav--main under the
. Nav--main_item. Why do you use such a strange naming style? This and so on in the CSS Specification section will explain the introduction.
State

State is responsible for defining the styles that are rendered in different states of the element. But it does not refer to the state of an element: hover or: Active. For example, a navigation bar pagination, the current page of the paging need to add. Active
attribute indicates that the current position is in this paging, and the HTML president is like this:

CSS code to copy content to clipboard

1. <nav class= "Nav--main" >
2. <ul>
3. <li><a>.........</a></li>
4. <li class= "Active" ><a>.........</a></li>
5. <li><a>.........</a></li>
6. </ul>
7. </nav>

So you can add. nav--main. Active such child class:

CSS code to copy content to clipboard

1. . nav--main {
2. Others ...;
3. . Active {
4. Background:darken ($background-color, 16%);
5. }
6. }

Sometimes in order to make reading more semantic, it's a friendly way to name it, and in this example, Is-active is better than. Active.
Theme

Theme is the definition of all the "main vision" on the screen, such as Border-color, Background-image, or font-family, and related typography settings. Why is it "the main vision"? Because some component modules are still left in the module to define, Theme is as responsible for the visual style on the "large schema" as Layout.

Editor's note thanks to Only1word that theme is more like skin in smacss.
CSS specification

Here is the collation of what I think must know, there are many other norms can be transferred to the end of the reference resources link, the article has introduced more details.
BEM

BEM is the acronym for block, Element, and Modifier, which is a class naming technique. If the whole project is done by itself, then of course it is not likely to have a class repetition problem, but if multiple f2e together to write the same part of the CSS, it is very easy to share class problems, so there is BEM such a naming technique.

The block blocks are used as the starting start, and the Partial as described in the previous smacss can be used as the prefix name of the chunk, and the element is the elements under block; Modifier is the attribute of this element.

Different blocks and Element are separated by __ Two bottom line areas, and different Modifier are used--two dash intervals. As for-a dash means that this class does not rely on any block or Element, and is an independent existence, such as:. Page-container or. Article-wrapper.

Here's an example:

CSS code to copy content to clipboard

1. . sidebar {
2. . sidebar--left__section {
3. . Sidebar--left__section--header {}
4. . Sidebar--left__section--footer {}
5. }
6. }

Javascript Hooks

The way to select DOM nodes as JavaScript through CSS class is the JavaScript Hook. You can often see this in JQuery: $ ('. Nav--main a '), but when CSS is mixed with JavaScript, it creates inconvenience on both sides of the maintenance, and JavaScript changes when you change the CSS.

So it is better to use HTML attributes to select DOM nodes, if you want to use CSS class that can also write a js-prefix, to indicate that this node has been used by Javascript, for example:

CSS code to copy content to clipboard

1. <li class= "Nav--main__item js-nav--main__item" ><a>.........</a></li>
2. <li class= "Nav--main__item js-nav--main__item" ><a>.........</a></li>
3. <li class= "Nav--main__item js-nav--main__item" ><a>.........</a></li>

Two spaces between two classes in PS. HTML will look better than a space.
A reasonable selector

Class doesn't matter whether it's semantic or not; You should pay attention to whether they are reasonable and don't emphasize class
The name should conform to the semantics, but should pay attention to the rationality and future of the use.

Sometimes in order to express more clearly, when using a CSS selector, to indicate that a class is used with a tag element, it will be written like this:

CSS code to copy content to clipboard

1. ol.breadcrumb{}
2. p.intro{}
3. ul.image-thumbs{}

But the above writing efficiency is not very good, the same purpose but can reduce superfluous modification, try to use the following wording, the label name with annotations, maintenance has the same effect, but the browser processing speed will be faster:

CSS code to copy content to clipboard

1. /*ol*/.breadcrumb{}
2. /*p*/.intro{}
3. /*ul*/.image-thumbs{}