深层次讲解CSS的OOCSS和SMACSS和BEM

日期:2021-03-05 类型:科技新闻 

关键词:如何制作微信小游戏,微信游戏小程序,公众号游戏,h5小游戏模板,小程序游戏源码

近期在The Sass Way里看到了Modular CSS typography1文,发现文章内容在开始一部分就提到了OOCSS、SMACSS、BEM、这3个词。“假如还不知道道这些是甚么,请先不必再次看下去”,想到到作者这样友善(gāo lěng)的提示,做为围观人民群众,当然要有一定的答复。因此,本文在这里各自详细介绍它们。

OOCSS、SMACSS及BEM全是相关css的方式论(精确地说,在其中BEM应当是1个详细的前端开发开发设计基础理论,不但限于css),可做为完成出色css构架(css architecture)的指南。

css易于了解,但运用和维护保养其实不简易。在各种各样开发设计场景下,css都可以能变成1个难题点。因而,大家撰写和机构css应用心、认真。
OOCSS

OOCSS(Object Oriented CSS),字面意思是朝向目标的CSS,是由Nicole Sullivan提出的css基础理论,其关键的两个标准是:

    Separate structure and skin(分离出来构造和主题)
    Separate container and content(分离出来器皿和內容)

用1个事例来讲明。请看下面这样的图文排序:

CSS Code拷贝內容到剪贴板
  1. <div class="media media-shadow">   
  2.     <div class="media-image-container">   
  3.         <img class="media-image" src="rean.jpg" alt="">   
  4.     </div>   
  5.     <div class="media-body">   
  6.         <p class="media-text">本作的主角,帝国北部地区皇室施瓦泽男爵的养子,也是托尔兹士官院校特科班出身“Ⅶ组”的组员。</p>   
  7.     </div>   
  8. </div>   
  9.   
  10. .media{   
  11.     padding10px;   
  12. }   
  13. .media:after{   
  14.     display: table;   
  15.     clearboth;   
  16.     content" ";   
  17. }   
  18. .media-image-container{   
  19.     floatleft;   
  20.     margin-right10px;   
  21. }   
  22. .media-image{   
  23.     displayblock;   
  24. }   
  25. .media-body{   
  26.     overflowhidden;   
  27. }   
  28. .media-shadow{   
  29.     box-shadow: 1px 1px 3px rgba(0, 0, 0, .5);   
  30. }  

上面这段编码用media表明了这类图文排序的网页页面元素。假如把组成它的html、css及javascript(假如有)看作1个总体,那就非常于这是1个元件,或说目标(object)。它能够在站点的任何地区被重用。

这样是怎样反映OOCSS的两个标准的呢?
Separate structure and skin

分离出来构造和主题是在于将1些视觉效果款式实际效果(比如background、color)做为独立的“主题”来运用。在上面的事例中的黑影实际效果,沒有被立即写在media的款式标准内,而是被独立写在了1个名为media-shadow的class中。因而,它变成了可挑选、可拆分的主题。假如不必须对应主题,甚么也不必加,假如必须,再加对应的class,便是这样的思路。
Separate container and content

分离出来器皿和內容规定使网页页面元素不依靠于其所处部位。在上面的事例中,css的挑选符都很短,无承继挑选符(比如.header .media { }),因此,这个图文排序的元件,能够在任何地区应用,且会有1致的外型。

假如必须在特殊的地区让这个元件看起来不1样1些,再次为这个元件提升class,将“不1样的一部分”做为可配备的选项。元件的外型仍不依靠其所处部位。
实际操作指南

能够看出,OOCSS设计风格的css能够叙述为两点:

    提升class
    不应用承继挑选符

OOCSS追求完美元件的复用,其class取名较为抽象性,1般不反映实际內容。
SMACSS

SMACSS(Scalable & Modular Architecture for CSS),是由Jonathan Snook提出的css基础理论。其关键标准有3条:

    Categorizing CSS Rules(为css归类)
    Naming Rules(取名标准)
    Minimizing the Depth of Applicability(最少化兼容深层)

这些标准各自是甚么意思呢?
Categorizing CSS Rules

这1点是SMACSS的关键。SMACSS觉得css有5个种别,各自是:

    Base
    Layout(Major Components)
    Module(Minor Components)
    State
    Theme

Base Rules,基本款式,叙述的是任何场所下,网页页面元素的默认设置外型。它的界定不容易用到class和ID。css reset也属于此类。

Layout Rules,合理布局款式。它和后边的Module Rules1同,叙述的是网页页面中的各类实际元素。元素是有层级级別之分的,Layout Rules属于较高的1层,它能够做为等级较低的Module Rules元素的器皿。上下分栏、栅格数据系统软件等都属于合理布局款式。

Module Rules,控制模块款式。它能够是1个商品目录,1个导航栏条。1般来讲,Module Rules界定的元素置放于前面说的Layout Rules元素以内。控制模块是单独的,能够在各种各样场所重用。

State Rules,情况款式,叙述的是任1元素在特殊情况下的外型。比如,1个信息框将会有success和error两种情况,导航栏条中的任1项都可以能有current情况。

再次OOCSS中的事例,下面新增的让元素无法显示的is-hidden就属于State Rules:

CSS Code拷贝內容到剪贴板
  1. <div class="media media-shadow is-hidden">   
  2.     ...   
  3. </div>   
  4.   
  5. .is-hidden{   
  6.     displaynone;   
  7. }  

Theme Rules,主题款式,叙述了网页页面主题外型,1般是指色调、情况图。Theme Rules能够改动前面4个种别的款式,且应该和前面4个种别分离出来起来(便于切换,也便是“换肤”)。SMACSS的Theme Rules不必求应用独立的class取名,也便是说,你能够在Module Rules中界定.mod { }随后在Theme Rules中也用.mod { }来界定必须改动的一部分。
Naming Rules

Naming Rules是说在想class等的取名时,考虑到用取名反映款式对应的种别。

依照前面5种的区划,Layout Rules用l-或layout-这样的前缀,比如:.l-header、.l-sidebar。

Module Rules用控制模块自身的取名,比如图文排序的.media、.media-image。

State Rules用is-前缀,比如:.is-active、.is-hidden。

Theme Rules假如做为独立class,用theme-前缀,比如.theme-a-background、.theme-a-shadow。

Base Rules不容易用到class和ID,是以标识挑选符为主的款式,比如p、a,不用取名。

取名标准不必须严苛遵循,能够依据具体状况和本身爱好做别的的承诺。纪录自身的承诺(写文本文档),随后遵循,便是可行的。
Minimizing the Depth of Applicability

字面汉语翻译是最少化兼容深层。根据1个简易的叙述来讲明:

CSS Code拷贝內容到剪贴板
  1. /* depth 1 */  
  2. .sidebar ul h3 { }   
  3.   
  4. /* depth 2 */  
  5. .sub-title { }  

左右两边css的差别在于html和css的藕合度。能够想起,因为上面的款式标准应用了承继挑选符,因而针对html的构造具体是有1定依靠的。假如把h3元素搬到另外一个部位,就有将会已不具备这些款式。对应的,下面的款式标准仅有1个挑选符,因而不依靠于特殊html构造,要是为元素加上class,便可以得到对应款式。

自然,承继挑选符是有效的,它能够降低因同样取名引起的款式矛盾(常产生于多人合作开发设计)。可是,大家不可过多应用,在不导致款式矛盾的容许范畴以内,尽量应用短的、不限制html构造的挑选符。这便是SMACSS的最少化兼容深层的实际意义。

看起来,这1点和OOCSS的分离出来器皿和內容的标准十分类似。
关键总体目标

SMACSS着力于完成两个关键总体目标:

    更词义化的html和css
    减少对特殊html构造的依靠

BEM

BEM,即Block,Element,Modifier,是由Yandex(俄罗斯最知名的互联网技术公司)的开发设计精英团队提出的前端开发开发设计基础理论。BEM根据Block、Element、Modifier来叙述网页页面。

Block是网页页面中单独存在的区块,能够在不一样场所下被重用。每一个网页页面都可以以看作是好几个Block构成。

Element是组成Block的元素,仅有在对应Block內部才具备实际意义,是依靠于Block的存在。

Modifier是叙述Block或Element的特性或情况。同1Block或Element能够有好几个Modifier。

这3一部分融合在1起,能够反映在class取名上,从而为开发设计者出示更友善、更成心义的css机构方法。其方式是:

CSS Code拷贝內容到剪贴板
  1. .block { }   
  2. .block_modifier { }   
  3. .block__element { }   
  4. .block__element_modifier { }  

再返回前面OOCSS的那个图文排序的事例,对运用BEM的写法的话便是:

CSS Code拷贝內容到剪贴板
  1. <div class="media media_shadow">   
  2.     <div class="media__image-container">   
  3.         <img class="media__image" src="rean.jpg" alt="">   
  4.     </div>   
  5.     <div class="media__body">   
  6.         <p class="media__text">本作的主角,帝国北部地区皇室施瓦泽男爵的养子,也是托尔兹士官院校特科班出身“Ⅶ组”的组员。</p>   
  7.     </div>   
  8. </div>  

这样的写法的益处是,在class取名上以承诺的方式携带了更多有效信息内容。在多人协作的情况下,新接手这个新项目的人,还可以很非常容易从class取名上辨别出来,哪些一部分是Block,哪些是对应的Element,哪些是Modifier,并进1步推论出哪一部分html能够单独应用。

BEM是详细的前端开发开发设计基础理论,这里只是提到了它选用的css的class取名标准。能够看出,BEM的取名标准可使编码更容易于维护保养。
综合性结果

这些基础理论真的能够运用吗?

是的,并且有效。可是,请不必过度开朗,任1种基础理论都只是对处理css撰写、维护保养难题的1种尝试,及其工作经验总结。就具体实际的新项目来讲,你将会依然会遇到疑惑。这些基础理论最关键的是出示了1种思路(即便它们也出示开发设计方式的编码库),你将会不立即运用它们,但应当根据它们了解到,在写编码以前,必须多1些思索。

不立即撰写css而是选用less、sass等预编译程序器,也一样必须有效的编码撰写和机构方法,由于能够从编译程序后获得的css来剖析,因此标准是相通的。
结语

在梳理写文字以前,我只基本掌握过OOCSS,而对此外2个都还没印象...(嗯,实际上很一切正常)

本文的3个基础理论都有各的设计风格,沒有孰优孰劣之说,全是在撰写css正值得参照的內容。假如能够,十分强烈推荐自身依据这些基础理论身后的用意,想1个合适自身的方式。

上一篇:Linux系统软件运维管理之修练秘法 返回下一篇:没有了