重庆分公司,新征程启航

为企业提供网站建设、域名注册、服务器等服务

CSS编程的OOCSS和SMACSS设计模式介绍

本篇内容主要讲解“CSS编程的OOCSS和SMACSS设计模式介绍”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“CSS编程的OOCSS和SMACSS设计模式介绍”吧!

成都创新互联主营玉溪网站建设的网络公司,主营网站建设方案,重庆APP开发公司,玉溪h5微信平台小程序开发搭建,玉溪网站营销推广欢迎玉溪等地区企业咨询

OOCSS

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

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

减少对 HTML 结构的依赖
 

CSS Code复制内容到剪贴板

  1.   

  2.   

      

  3.      

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

若从这个例子来考量,原则上 都一定会接在

  • 标签的后面,一个
  • 只会有一个 ,通常不会独立存在,那就可以写成 .nav--main a {},会是比较好的写法,甚至是直接给 加上 class nav--main_item。后者是 OOCSS 所提倡的用法。

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

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

    CSS Code复制内容到剪贴板

    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. }   

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

    CSS Code复制内容到剪贴板

    1.   

    2.   

    先用 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复制内容到剪贴板

    1. html {}   

    2. input[type=text] {}   

    3. a:hover {}   

    Layout     

    Layout 是指整个网站的「大架构」的外观,而非 .button 这种小元件的 class。网站通常会有一些主要的大区块,可能是 header 或 footer,Layout 就是用来定义这些「大架构」的 CSS。如果有做 Responsive Web Design 或是用 Grid System,也是把规则写在 Layout 这里。

    以下这是个范例:
     

    CSS Code复制内容到剪贴板

    1. #header { margin: 30px 0; }   

    2. #articles-wrapper { ......; }   

    3. .sidebar {   

    4.   &.sidebar--rightright { ......; }   

    5.   &.sidebar-left { ......; }   

    6. }  

    通常只有一个选择器,一个 id、或一个 class。
    Module

    原本的 SMACSS 对 Module 的设计我觉得不是很好,所以我硬是将 Module
    拆分出一个 Partial。

    这里的 Module 顾名思义,就是可以在其他地方被重复使用,如果要找更明确的例子,我想就像 Twitter Bootstrap 的Components
    一样,或者像前面 OOCSS 所举例的 .button 这种会被重复使用的元件模组。

    模组不需要用任何的 prefix,因为 Module 就是设计来可以重复应用在不同的 page 上。
    Partial

    Partial 跟 Latout 不同,也跟 Module 不同,他比 Layout 的范围小,可能是
    header 底下的某个子元素。他不像 Module,他是特定单一领域下特别的设定。

    CSS Code复制内容到剪贴板

    1. .nav--main {   

    2.   a { ......; }   

    3. }  

    通常会将 Partial 的名称加在子 class 作为 prefix,例如 .nav--main 底下的
    .nav--main_item。至于为什么要用这么奇怪的命名方式?这等等在 CSS 规范部分会说明介绍。
    State

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

    CSS Code复制内容到剪贴板

    1.   

    2.   

        

    3.   

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

    CSS Code复制内容到剪贴板

    1. .nav--main {   

    2.   // others…;   

    3.   .active {   

    4.     background: darken($background-color, 16%);   

    5.   }   

    6. }  

    有时候为了让阅读更贴近语义,会用比较友善的命名方式,以此段的范例来说,.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。

    这里有个范例:

    CSS Code复制内容到剪贴板

    1. .sidebar {   

    2.   .sidebar--left__section {   

    3.     .sidebar--left__section--header {}   

    4.     .sidebar--left__section--footer {}   

    5.   }   

    6. }   

    Javascript Hook

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

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

    CSS Code复制内容到剪贴板

    1. .........

    2.   

    3. .........

    4.   

    5. .........

    6.   

    PS. HTML 里两个 class 之间用两个空格,会比一个空格看起来好阅读。
    合理的选择器

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

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

    CSS Code复制内容到剪贴板

    1. ol.breadcrumb{}   

    2. p.intro{}   

    3. ul.image-thumbs{}  

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

    CSS Code复制内容到剪贴板

    1. /*ol*/.breadcrumb{}   

    2. /*p*/.intro{}   

    3. /*ul*/.image-thumbs{}  

    到此,相信大家对“CSS编程的OOCSS和SMACSS设计模式介绍”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!


    本文名称:CSS编程的OOCSS和SMACSS设计模式介绍
    网页链接:http://cqcxhl.cn/article/pdhgos.html
  • 其他资讯

    在线咨询
    服务热线
    服务热线:028-86922220
    TOP