浅谈CSS程序编写的OOCSS和SMACSS设计方案方式

日期:2020-10-19 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

真心实意感觉写出 CSS 其实不难,可是要写出可被维护保养的 CSS 比别的程式語言都还难。幸而早已有很多高手级的角色,提出很多设计方案方式和逻辑思维,借由站在超大型巨人的肩膀上可让事儿事倍功半。这篇文章内容就来讲说 OOCSS、SMACSS 和编写 CSS 时应当留意的标准。

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

OOCSS 并不是甚么新技术应用,只是1种编写 CSS 的设计方案方式,或能够说是1种「社会道德标准」,大概上我感觉关键仅有两个:

  1.     降低对 HTML 构造的依靠
        提升 CSS class 反复性的应用

降低对 HTML 构造的依靠
 

CSS Code拷贝內容到剪贴板
  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>     

1般的导航栏栏写法,构造应当会像上面的 HTML 案例1样,假如要对那些 <a> 标识界定款式,CSS 的写法将会写成.nav--main ul li a {},这类写法先无论效率上的难题,能够看出来过多地依靠元素标识的构造,有将会以后 HTML 构造更改,这个 CSS 就务必跟著重构,导致维护保养上过剩的成本费。

若从这个事例来考虑,标准上 <a> 都1定会接在 <li> 标识的后边,1个 <li> 只会有1个 <a>,一般不容易单独存在,那便可以写成 .nav--main a {},会是较为好的写法,乃至是立即给 <a> 再加 class nav--main_item。后者是 OOCSS 所倡导的用法。

这样的写法,1来效率基础理论上较为好(我没法认证),2来层级较为单纯性。
提升 CSS class 的反复应用

在 OOCSS 的意识中,强调反复应用 class,而应当防止应用 id 做为 CSS 的挑选器。这类念头便是像
OOP
尽可能抽离反复的程式码,比如下列这个事例,这是两种按钮的 CSS 款式特性:
 

CSS Code拷贝內容到剪贴板
  1. .button {   
  2.   displayinline-block;   
  3.   padding6px 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. <a class="button button-default">   
  2. <a class="button button-primary">  

先用 button 宣布此为1个按钮的款式,再用 button-default 或 button-primary 做为按钮底色的差别。这么做能够维护保养成本费变得较为低,比如:要想改网站上全部按钮的尺寸,就要是改动 .button 的 padding 罢了。
SMACSS

我对 SMACSS 的了解还并不是很深层次,也许把 Scalable and Modular Architecture for CSS 看完后会有更深1曾的了解。现阶段对 SMACSS 的定义仅限于它对 CSS 不一样的业务流程逻辑性所做的区划方法:

但我觉得本来的设计方案并不是很稳妥,因而我自身做了1些改进:
Base

Base 便是设置标识元素的预设值,比如访问器的 reset 能够写在这里,假如用的是 Compass,要是 @include global-reset 便可。这里只会对标识元素自身做设置,不容易出現任何 class 或
id,可是能够有特性挑选器或是伪类:
 

CSS Code拷贝內容到剪贴板
  1. html {}   
  2. input[type=text] {}   
  3. a:hover {}   

Layout     

Layout 是指全部网站的「大构架」的外型,而非 .button 这类小元件的 class。网站一般会有1些关键的大区块,将会是 header 或 footer,Layout 便是用来界定这些「大构架」的 CSS。假如有做 Responsive Web Design 或是用 Grid System,也是把标准写在 Layout 这里。

下列这是个案例:
 

CSS Code拷贝內容到剪贴板
  1. #header { margin30px 0; }   
  2. #articles-wrapper { ......; }   
  3. .sidebar {   
  4.   &.sidebar--rightright { ......; }   
  5.   &.sidebar-left { ......; }   
  6. }  

一般仅有1个挑选器,1个 id、或1个 class。
Module

本来的 SMACSS 对 Module 的设计方案我感觉并不是很好,因此我硬是将 Module
拆分出1个 Partial。

这里的 Module 说白了,便是能够在别的地区被反复应用,假如要找更确立的事例,我想就像 Twitter Bootstrap 的Components
1样,或像前面 OOCSS 所举例的 .button 这类会被反复应用的元件模组。

模组不必须用任何的 prefix,由于 Module 便是设计方案来能够反复运用在不一样的 page 上。
Partial

Partial 跟 Latout 不一样,也跟 Module 不一样,他比 Layout 的范畴小,将会是
header 底下的某个子元素。他不像 Module,他是特殊单1行业下非常的设置。

CSS Code拷贝內容到剪贴板
  1. .nav--main {   
  2.   a { ......; }   
  3. }  

一般会将 Partial 的名字加在子 class 做为 prefix,比如 .nav--main 底下的
.nav--main_item。至于为何要用这么怪异的取名方法?这这些在 CSS 标准一部分会表明详细介绍。
State

State 负责界定元素不一样的情况下,所展现的款式。可是并不是指1个元素的 :hover 或 :active 下的情况。举例来讲,1个导航栏栏分页查询,现阶段所属网页页面的分页查询必须再加 .active
的特性表明现阶段部位是在这个分页查询,HTML 会长这样:

CSS Code拷贝內容到剪贴板
  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>  

因而能够替 .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 1样负责「大构架」上的视觉效果款式。

编者注 谢谢 Only1Word 指出,theme 在 SMACSS 中更相近皮肤。
CSS 标准

这里梳理的是我感觉1定要了解的,别的也有许多标准能够转到文末的参照資源连结,那篇文章内容有详细介绍更多的细节。
BEM

BEM 即 Block、Element、Modifier 的缩写,这是1种 class 的取名技能。假如全部 project 仅有自身1本人做,那自然是不太将会出現 class 反复的难题,可是假如另外好几个 F2E 1起写同个一部分的 CSS,就很非常容易出現同用 class 的难题,因而有了 BEM 这样的取名技能。

将 Block 区块做为起止开始,像前面 SMACSS 详细介绍的 Partial 便可以拿来做为 Block 的 prefix 名字;Element 则是 Block 下的元素;Modifier 则是这个元素的特性。

不一样 Block 和 Element 用 __ 两个底线区分隔来,不一样的 Modifier 则用 -- 两个 dash 区隔。至于 - 1个 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 搅在1起反而导致两侧维护保养上的麻烦,当改了 CSS 时 Javascript 也要跟著改。

因此用 HTML 的特性去选择 DOM 连接点会更好,假如非要用 CSS 的 class 那还可以多写1个 js- 的 prefix,以表明这个连接点有被 Javascript 应用,比如:

CSS Code拷贝內容到剪贴板
  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>  

PS. HTML 里两个 class 之间用两个空格,会比1个空格看起来好阅读文章。
有效的挑选器

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