Introduction to OOCSS and SMACSS design patterns in CSS programming

This article mainly introduces the OOCSS and SMACSS design patterns of CSS programming. The author analyzes the two different ideas for designing CSS. Friends in need can refer to it

I really feel that writing CSS is It's not difficult, but writing maintainable CSS is harder than any other programming language. Fortunately, there are already many masters who have proposed many design patterns and thinking. By standing on the shoulders of giants, things can be done with less effort. This article will talk about OOCSS, SMACSS and the specifications that should be paid attention to when writing CSS.

(The examples in this article use SCSS syntax)
OOCSS

OOCSS is not a new technology, it is just a design pattern for writing CSS, or it can be said It is a kind of "ethical code". Generally speaking, I think there are only two key points:

1. Reduce dependence on HTML structure
   Increase the repetitive use of CSS classes

Reduce dependence on HTML structure

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

General navigation bar writing, the structure should be like the above HTML example , if you want to define styles for those 3499910bf9dac5ae3c52d5ede7383485 tags, the CSS may be written as .nav--main ul li a {}. Regardless of the performance issues, this writing method can be seen to rely too much on the structure of the element tag. It is possible that if the HTML structure changes later, the CSS will have to be reconstructed accordingly, resulting in unnecessary maintenance costs.

If we consider this example, in principle, 3499910bf9dac5ae3c52d5ede7383485 will always follow the 25edfb22a4f469ecb59f1190150159c6 tag. There will only be one 3499910bf9dac5ae3c52d5ede7383485 for one 25edfb22a4f469ecb59f1190150159c6. Usually It will not exist independently, so it can be written as .nav--main a {}, which is a better way of writing, or even directly add class nav--main_item to 3499910bf9dac5ae3c52d5ede7383485. The latter is the usage advocated by OOCSS.

This way of writing is theoretically better in performance (I can’t verify it), and secondly, the level is relatively simple.
Increase the reuse of CSS classes

In the concept of OOCSS, it is emphasized to reuse classes, but the use of id as a CSS selector should be avoided. The idea is to try to extract duplicate code like
OOP
, such as the following example, which is the CSS style attribute of two buttons:

.button {   
  display: inline-block;   
  padding: 6px 12px;   
  color: hsla(0, 100%, 100%, 1);   
  &.button-default { background: hsla(180, 1%, 28%, 1); }   
  &.button-primary { background: hsla(208, 56%, 53%, 1); }   
}

The above CSS extracts the duplicate parts from two different styles of buttons and defines them in the same class
. Therefore, to use such a style, the HTML may be written like this:

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

First use button to declare this as a button style, and then use button-default or button -primary as the difference in button background color. This can reduce maintenance costs. For example, if you want to change the size of all buttons on the website, you only need to modify the padding of .button.
SMACSS

My understanding of SMACSS is not very deep. Maybe I will have a deeper understanding after reading Scalable and Modular Architecture for CSS. The current concept of SMACSS is limited to the way it divides different business logic of CSS:

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

Base is to set the default value of the tag element. For example, the browser's reset can be written here. If you are using Compass, just @include global-reset. Only the label element itself will be set here, no class or
id will appear, but there can be attribute selectors or pseudo-classes:

html {}   
input[type=text] {}   
a:hover {}

Layout

Layout refers to the appearance of the "big structure" of the entire website, not the class of small components such as .button. Websites usually have some main large blocks, which may be header or footer. Layout is the CSS used to define these "big structures". If you do Responsive Web Design or use Grid System, write the rules here in Layout.

The following is an example:

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

Usually there is only one selector, an id, or a class.
Module

I don’t think the original SMACSS design of Module is very good, so I just split Module
into a Partial.

As the name suggests, the Module here can be reused in other places. If you are looking for a more clear example, I think it is like the Components
of Twitter Bootstrap, or like the .button example in the previous OOCSS This component module will be reused.

Modules do not need to use any prefix, because Module is designed to be reused on different pages.
Partial

Partial is different from Latout and also different from Module. It has a smaller scope than Layout and may be a child element under
header. It is not like Module, it is a special setting in a specific single field.

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

Usually the name of Partial is added to the subclass as a prefix, such as
.nav--main_item under .nav--main. As for why such a strange naming method is used? This and so on will be explained in the CSS specification section.
State

State 负责定义元素不同的状态下，所呈现的样式。但是并非指一个元素的 :hover 或 :active 下的状态。举例来说，一个导航栏分页，目前所在页面的分页需要加上 .active
的属性表示目前位置是在这个分页，HTML 会长这样：

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

因此可以替 .nav--main 增加 .active 这样的子 class：

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

有时候为了让阅读更贴近语义，会用比较友善的命名方式，以此段的范例来说，.is-active 就比 .active 来得好读。
Theme

Theme 是画面上所有「主视觉」的定义，例如 border-color、background-image 或是 font-family 等相关的 Typography 设定。为什么说是「主视觉」？因为有些元件模组仍然是留在 Module 去定义，Theme 就像 Layout 一样负责「大架构」上的视觉样式。

编者注 感谢 Only1Word 指出，theme 在 SMACSS 中更类似皮肤。
CSS 规范

这里整理的是我觉得一定要知道的，其他还有很多规范可以转到文末的参考资源连结，那篇文章有介绍更多的细节。
BEM

BEM 即 Block、Element、Modifier 的缩写，这是一种 class 的命名技巧。如果整个 project 只有自己一个人做，那当然是不太可能出现 class 重复的问题，但是如果同时多个 F2E 一起写同个部分的 CSS，就很容易出现共用 class 的问题，因此有了 BEM 这样的命名技巧。

将 Block 区块作为起始开头，像前面 SMACSS 介绍的 Partial 就可以拿来作为 Block 的 prefix 名称；Element 则是 Block 下的元素；Modifier 则是这个元素的属性。

不同 Block 和 Element 用 __ 两个底线区隔开来，不同的 Modifier 则用 -- 两个 dash 区隔。至于 - 一个 dash 则表示这个 class 不依赖任何 Block 或 Element，是个独立的存在，例如：.page-container 或 .article-wrapper。

这里有个范例：

.sidebar {   
  .sidebar--left__section {   
    .sidebar--left__section--header {}   
    .sidebar--left__section--footer {}   
  }   
}

Javascript Hook

透过 CSS class 来作为 Javascript 选取 DOM 节点的方式，就是 Javascript Hook。用 jQuery 可以常常看到这样的写法：$('.nav--main a')，可是当 CSS 跟 Javascript 搅在一起反而造成两边维护上的不便，当改了 CSS 时 Javascript 也要跟著改。

所以用 HTML 的属性去选取 DOM 节点会更好，如果非要用 CSS 的 class 那也可以多写一个 js- 的 prefix，以表示这个节点有被 Javascript 使用，例如：

<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 里两个 class 之间用两个空格，会比一个空格看起来好阅读。
合理的选择器

    class 无所谓是否语意化的问题；你应该关注它们是否合理，不要刻意强调 class
    名称要符合语意，而要注重使用的合理性与未来性。

有时候为了表示更明确，在使用 CSS 的选择器时，要表示某的 class 是搭配某个标签元素使用，会写成这样：

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

但是上面这个写法效能不是很好，同样的目的但可以减少多余的修饰，试试改用下面这种写法，将标签名称用注解标示起来，维护上有相同的效果，但是浏览器处理的速度会比较快：

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

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

CSS3如何实现自定义“W”形运行轨迹

关于css3弹性盒模型的介绍

关于CSS 平级和儿子级样式的写法

The above is the detailed content of Introduction to OOCSS and SMACSS design patterns in CSS programming. For more information, please follow other related articles on the PHP Chinese website!