浅谈CSS编程的OOCSS和SMACSS设计模式

2019-09-07 郑州网站建设  

真心觉得写出 CSS 并不难,但是要写出可被维护的 CSS 比其他程式语言都还难。所幸已经有许多大师级的人物,提出许多设计模式和思维,借由站在巨人的肩膀上可以让事情事半功倍。这篇新闻就来说说 OOCSS、SMACSS 和撰写 CSS 时需要注意的规范。

(本文的例子用的是 SCSS 语法)
OOCSS

OOCSS 不是什么新技术,只是一种撰写 CSS 的设计模式,或者可以说是一种「道德规范」,大致上我觉得重点只有两个:

    减少对 HTML 结构的依赖
    增加 CSS class 重复性的使用

减少对 HTML 结构的依赖
 

CSS Code复制内容到剪贴板

<nav class="nav--main">   

  <ul>   

    <li><a>.........</a></li>   

    <li><a>.........</a></li>   

    <li><a>.........</a></li>   

  </ul>   

</nav>     

一般的导航栏写法,结构需要会像上面的 HTML 范例一样,如果要对那些 <a> 标签定义样式,CSS 的写法可能写成.nav--main ul li a {},这种写法先不管效能上的问题,可以看出来过度地依赖元素标签的结构,有可能之后 HTML 结构改变,这个 CSS 就必须跟著重构,造成维护上多余的成本。

若从这个例子来考量,原则上 <a> 都一定会接在 <li> 标签的后面,一个 <li> 只会有一个 <a>,通常不会独立存在,那就可以写成 .nav--main a {},会是比较好的写法,甚至是直接给 <a> 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。

这样的写法,一来效能理论上比较好(我没方案验证),二来层次比较单纯。
增加 CSS class 的重复使用

在 OOCSS 的观念中,强调重复使用 class,而需要避免使用 id 作为 CSS 的选择器。这种想法就是像
OOP
尽量抽离重复的程式码,例如以下这个例子,这是两种按钮的 CSS 样式属性:
 

CSS Code复制内容到剪贴板

.button {   

  displayinline-block;   

  padding6px 12px;   

  color: hsla(0, 100%, 100%, 1);   

  &.button-default { background: hsla(180, 1%, 28%, 1); }   

  &.button-primary { background: hsla(208, 56%, 53%, 1); }   

}   

上面的 CSS 将两种不同样式的 button,抽离出重复的部份,并且定义在同个 class
上。因此,要使用这样的样式,HTML 的写法可能长这个样子:
 

CSS Code复制内容到剪贴板

<a class="button button-default">   

<a class="button button-primary">  

先用 button 宣告此为一个按钮的样式,再用 button-default 或 button-primary 作为按钮底色的区别。这么做可以维护成本变得比较低,例如:想要改网站上所有按钮的大小,就只要修改 .button 的 padding 而已。
SMACSS

我对 SMACSS 的理解还不是很深入,或许把 Scalable and Modular Architecture for CSS 看完后会有更深一曾的理解。目前对 SMACSS 的概念仅限于它对 CSS 不同的业务逻辑所做的划分方式:

但我认为原本的设计不是很妥当,因此我自己做了一些改良:
Base

Base 就是设定标签元素的预设值,例如浏览器的 reset 可以写在这里,如果用的是 Compass,只要 @include global-reset 即可。这里只会对标签元素本身做设定,不会出现任何 class 或
id,但是可以有属性选择器或是伪类:
 

CSS Code复制内容到剪贴板

html {}   

input[type=text] {}   

a:hover {}   

Layout     


河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://tzchb.ieyo.com/dede/1124.html转载请标明出处,谢谢合作!
标签:
  • css
  • CSSOOCSSSMAC
  • 真心
  • 觉得