Introduction to OOCSS and SMACSS design patterns for CSS programming

This article mainly introduces the OOCSS and smacss design patterns of CSS programming, the author analyzes the different ideas of the two design CSS, the need for friends can refer to the following

I really think it's not hard to write CSS, but it's harder to write CSS that can be maintained than any other programming language. Fortunately, there are many masters of the character, put forward a lot of design patterns and thinking, by standing on the shoulders of giants can make things more effective. This article is about OOCSS, SMACSS, and the specifications you should be aware of when writing CSS.

(the example in this article is SCSS syntax)
Oocss

OOCSS is not a new technology, just a CSS design pattern, or can be said to be a "code of ethics", in general I think the focus is only two:

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

Reduce dependency on HTML structures

<nav class= "Nav--main" >     <ul>       <li><a>.........</a></li>       <li ><a>.........</a></li>       <li><a>.........</a></li>     </ul >   </nav>

The general navigation bar notation, the structure should be like the above HTML example, if you want to define the <a> tag style, CSS can be written in writing. Nav--main ul Li a {}, this kind of writing, regardless of the performance problem, can be seen to rely on the structure of element tag excessively, It is possible that after the HTML structure changes, this CSS must be reconstructed, resulting in unnecessary maintenance costs.

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

This way of writing, the effectiveness of the theory is better (I have no way to verify), and the level is relatively simple.
To add CSS class re-use

In the OOCSS concept, emphasis is placed on reusing class, rather than using ID as a selector for CSS. This idea is like
Oop
Try to pull out duplicate code, such as the following example, which is the CSS style properties of the two buttons:

. button {     display:inline-block;     PADDING:6PX 12px;     Color:hsla (0, 100%, 100%, 1);     &.button-default {Background:hsla (1, 28%, 1);}     &.button-primary {Background:hsla (208, 56%, 53%, 1);}   }

The CSS above will draw two different styles of buttons out of the repeating part and define the same class
On So, to use such a style, HTML might look like this:

<a class= "button Button-default" >   <a class= "button Button-primary" >

Use button to declare this as a button style, and then use Button-default or button-primary as the difference between the background of the button. This makes maintenance costs less expensive, for example: To change the size of all the buttons on the site, just modify the. Button's 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 was not very proper, so I made some improvements myself:
Base

Base is the setting of the default tag element, such as the browser reset can be written here, if the use of Compass, as long as the @include global-reset. This will only set the label element itself, and will not show any class or
ID, but can have a property selector or pseudo-class:

HTML {}   Input[type=text] {}   a:hover {}

Layout

Layout refers to the appearance of the "Big architecture" of the entire site, not the. button, the class of the small element. The site usually has some major chunks, perhaps headers or footer,layout, which are used to define these "big architecture" CSS. If you have a responsive Web Design or a Grid System, write the rules in Layout here.

Here's an example:

#header {margin:30px 0;}   #articles-wrapper {...;}   . Sidebar {     &.sidebar--rightright {...;}     &.sidebar-left {...;}   }

Usually there is only one selector, one ID, or one class.
Module

The original smacss on the module design I feel not very good, so I just obstinately will module
Splits a Partial.

The Module here, as its name implies, 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 example. Button This is a component module that will be reused.

The module does not need any prefix, because the module is designed to be reused on different page.
Partial

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

. nav--main {     a {...}   }

The name of the Partial is usually added to the sub-class as a prefix, for example, Nav--main.
. Nav--main_item. Why use such a strange naming method? This is explained in the CSS specification section.
State

The state is responsible for defining the styles that are rendered in different states of the element. But it does not refer to an element's: hover or: State under active. For example, a navigation bar paging, the current page of the paging needs to add. Active
The property represents the current location in this page, as the HTML president does:

<nav class= "Nav--main" >     <ul>       <li><a>.........</a></li>       <li Class= "Active" ><a>.........</a></li>       <li><a>.........</a></li >     </ul>   </nav>

Therefore, you can add. nav--main to the. Active sub-class:

. nav--main {     //others ...;.     Active {       Background:darken ($background-color, 16%);     }   }

Sometimes in order to make reading more semantic, it will be a more friendly naming, in this paragraph of the example, the. Is-active is better read than. Active.
Theme

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

Editor's note thank Only1word pointed out that theme in smacss more similar to the skin.
CSS specification

Here is 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 abbreviation for Block, Element, Modifier, which is a class naming technique. If the whole project has only one person to do, it is certainly not likely to have a class duplication problem, but if multiple f2e together to write the same part of the CSS, it is easy to have a common class problem, so there is BEM such a naming technique.

Block block as a starting point, like the previous smacss described in the Partial can be used as the prefix name of the block, element is a block of elements; Modifier is the attribute of this element.

The different blocks and Element are separated by __ Two bottom line areas, and the different Modifier are used-two dash partitions. As for-a dash means that the class does not depend on any Block or Element, and is an independent existence, for example:. Page-container or. Article-wrapper.

Here's an example:

. sidebar {     . sidebar--left__section {       . Sidebar--left__section--header {}       . sidebar--left__ Section--footer {}     }   }

Javascript Hooks

JavaScript hooks are the way to select DOM nodes as JavaScript through CSS class. With JQuery, you can often see this: $ ('. Nav--main a '), but when CSS is mixed with JavaScript, it causes both maintenance inconvenience, and JavaScript changes when CSS is changed.

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

<li class= "Nav--main__item  js-nav--main__item" ><a>.........</a></li>   <li class= "Nav--main__item  js-nav--main__item" ><a>.........</a></li>   <li class= " Nav--main__item  Js-nav--main__item "><a>.........</a></li>

PS. HTML two classes with two spaces, will look good to read than a space.
A reasonable selector

Class does not matter whether it is semantic or not, and you should be concerned about whether they are reasonable or not deliberately emphasizing class
The name should conform to the semantics, but should pay attention to the rationality and future of the use.

Sometimes, in order to be more explicit, when using a CSS selector, it means that a class is used with a tag element, which is written like this:

ol.breadcrumb{}   p.intro{}   ul.image-thumbs{}

But the above-written performance is not very good, the same purpose but can reduce the superfluous decoration, try to use the following this way, the label name annotated with annotations, maintenance has the same effect, but the browser processing speed will be relatively fast:

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

The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!