189 8069 5689

CSS架构中的SMACSS该如何理解

这期内容当中小编将会给大家带来有关CSS架构中的SMACSS该如何理解,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

创新互联是一家集网站建设,阳江企业网站建设,阳江品牌网站建设,网站定制,阳江网站建设报价,网络营销,网络优化,阳江网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

因为 CSS 只有一个作用域,如果不注意维护 CSS 代码,则会导致我们写的代码难于阅读和维护,于是我们借助网页本身是有层次的,抽象出来了BEM 方法论。

BEM 简单的三层分法,在应对小中型网站没有问题,但是去应对复杂网站的样式可能就比较困难了,我们需要寻求一个更好的办法。

于是 SMACSS 横空出世了, SMACSS 和 BEM 的关系有点像布局中的 Flex 布局和 Grid 布局的关系。

但是请注意, SMACSS 和 BEM 之前绝不是包含和被包含的问题,就像在应用 Flex 布局和 Grid 布局的时候,铺网站结构我们会更多倾向 Grid,普通简单的二维布局则会采用 Flex,我们会在合适的时机采用合适的方法,SMACSS 和 BEM 也差不多,掌握了思想,应用都是小事。

什么是 SMACSS

不难想到,SMACSS 是缩写,这个缩写就是网站的开门注 :Scalable and Modular Architecture for CSS,名字的意思很明确就是要编写模块化、结构化和可扩展的 CSS。

CSS架构中的SMACSS该如何理解

当你学完 SMACSS,再来理解 Scalable and Modular Architecture for CSS 体会就更深了。

SMACSS 应该怎么读,SMACSS 虽然不是一个单词,但是它是有自己的发音的,音同单词 {smacks}。

SMACSS 的分类

如果给 BEM 找个核心词,那就是分层,如果给 SMACSS 也找个核心词,那肯定就是分类,一字之差,我们来看看 SMACSS 如何进行分类的。

SMACSS 的核心是分类,具体把项目的样式分为了五类:

  • Base(基础)

  • Layout(布局)

  • Module(模块)

  • State(状态)

  • Theme(主题)

接下来我们具体看看五个部分具体的内容。

Base

基础(Base)规则里一般放置默认样式。这些默认样式基本上都是元素选择器,不过也可以包含属性选择器,伪类选择器,孩子选择器,兄弟选择器。本质上来说,一个基础样式定义了元素在页面的任何位置应该是怎么样的。

例如:

html {
    margin: 0;
    font-family: sans-serif;
}
a {
    color: #000;
}
button {
    color: #ababab;
    border: 1px solid #f2f2f2;
}

我们看到 Base 的代码和 CSS resets 非常的相似。

这部分的代码一般我们都是寻求 Normalize.css 或 sanitize.css 的帮助,而不需要自己完成。

Layout

我们先来区分下网站什么部分属于 Layout 什么部分属于 Module,看看下面这个网站截图:

CSS架构中的SMACSS该如何理解

先来一次大致的划分,主要包括头部、体部、尾部等,这些就是属于 Layout 的。

再来一次细致的划分,Layout 里面的元素还可以继续细分,例如导航栏等,这些都是组件 Module。

Layout 很贴近 HTML 标签,作为网站的骨架,负责布局,Module 更多负责业务展示和交互的部分。

Layout 与 Module 的关系为( > 表示包含):

Layout > Module

如果网站复杂,其实是可以这样的:

> Layout > Module > Layout > Module ...

所以,布局(Layout)规则就是将页面拆分成几个部分,每个部分都可能有一到多个模块。

一般布局类名都是 .l- 开头。

需要注意,官方讲主要的 layout 使用可以使用 ID 选择器,次要的 layout 采用类选择器,对于这个我是绝对不能接受的,我认为应该全用类。

走个实例:

CSS架构中的SMACSS该如何理解

.l-header {}
.l-primarynav {}
.l-main-content {}

注意,其实现在项目开发,Layout 往往直接被当做组件直接使用了,例如

等组件,然后你可以在他们内部去遵循 Module 规则。

Module

看完上一节,Module 就很容易理解了。

模块(Module)  是我们的设计当中可重用,可模块化的部分。插图,侧边栏,产品列表等等都属于模块。

Module 从工程化的角度,你叫它 component 也没多大问题。

走个实例,一个 POST 组件:


    
        
            
            
        
                                                   

                

            
                      

类名很简单,以 moudle-name 或 component—name 作为前缀就行了。

State

对于 Module 甚至是 Layout,里面不可避免需要动态交互,比如按钮是不是禁用 disable,布局是不是激活 active,tab 组件是不是展开 expand 等,于是我们需要维护 state 来操作动态变化的部分,这就是第四个部分 State。

State 的类名,一般使用 .is- 来开头,例如:

.is-collapsed {}
.is-expanded {}
.is-active {}
.is-highlighted {}
.is-hidden {}
.is-shown {}
.is-successful {}

Theme

大家多多少少都用过网站的换肤功能,所以 Theme 也算比较常见的了,整个网站上重复的元素,比如颜色、形状、边框、阴影等规则基本都在 Theme 的管辖下,换句话说 Theme 是定义公共类名的地方。

大多数情况下,。我们不想每次创建它们时都重新定义它们。相反,我们想要定义一个唯一的类,我们稍后才将其添加到默认元素中。

.button-large {
    width: 60px;
    height: 60px;
}
Like

不要将这些 SMACSS 主题规则与基本规则混淆,因为基本规则仅针对默认外观,并且它们往往类似于重置为默认浏览器设置,而主题单元更像是一种样式,它提供最终外观,这种特定的配色方案是独一无二的。

如果站点具有多个样式或多个用于不同状态的主题,主题规则也很有用,因此可以在页面上的某些事件期间轻松更改或交换,例如使用主题切换按钮。至少,它们将所有主题样式保存在一个地方,因此您可以轻松更改它们并保持它们井井有条。

SMACSS 目录

项目中使用了 SMACSS 的命名规范,目的大概就是这样的:

CSS架构中的SMACSS该如何理解

因为 CSS 只有一个作用域,会导致代码很混乱,很难阅读,也很难扩展,于是出现了BEM ,但是当项目更加复杂的时候,我们需要一个新的更上一个台阶的样式管理方案,这就是 SMACSS ,不用于 BEM 的分层,它把采用的办法是分类,项目中的样式文件被它分为五类,让我样式管理变得更加的方便了。

css的基本语法是什么

css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。

上述就是小编为大家分享的CSS架构中的SMACSS该如何理解了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


分享名称:CSS架构中的SMACSS该如何理解
地址分享:http://cdxtjz.cn/article/pjpidd.html

其他资讯