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。
当你学完 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,看看下面这个网站截图:
先来一次大致的划分,主要包括头部、体部、尾部等,这些就是属于 Layout 的。
再来一次细致的划分,Layout 里面的元素还可以继续细分,例如导航栏等,这些都是组件 Module。
Layout 很贴近 HTML 标签,作为网站的骨架,负责布局,Module 更多负责业务展示和交互的部分。
Layout 与 Module 的关系为( > 表示包含):
Layout > Module
如果网站复杂,其实是可以这样的:
> Layout > Module > Layout > Module ...
所以,布局(Layout)规则就是将页面拆分成几个部分,每个部分都可能有一到多个模块。
一般布局类名都是 .l- 开头。
需要注意,官方讲主要的 layout 使用可以使用 ID 选择器,次要的 layout 采用类选择器,对于这个我是绝对不能接受的,我认为应该全用类。
走个实例:
.l-header {} .l-primarynav {} .l-main-content {}
注意,其实现在项目开发,Layout 往往直接被当做组件直接使用了,例如
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; }
不要将这些 SMACSS 主题规则与基本规则混淆,因为基本规则仅针对默认外观,并且它们往往类似于重置为默认浏览器设置,而主题单元更像是一种样式,它提供最终外观,这种特定的配色方案是独一无二的。
如果站点具有多个样式或多个用于不同状态的主题,主题规则也很有用,因此可以在页面上的某些事件期间轻松更改或交换,例如使用主题切换按钮。至少,它们将所有主题样式保存在一个地方,因此您可以轻松更改它们并保持它们井井有条。
SMACSS 目录
项目中使用了 SMACSS 的命名规范,目的大概就是这样的:
因为 CSS 只有一个作用域,会导致代码很混乱,很难阅读,也很难扩展,于是出现了BEM ,但是当项目更加复杂的时候,我们需要一个新的更上一个台阶的样式管理方案,这就是 SMACSS ,不用于 BEM 的分层,它把采用的办法是分类,项目中的样式文件被它分为五类,让我样式管理变得更加的方便了。
css的基本语法是什么
css的基本语法是:1、css规则由选择器和一条或多条声明两个部分构成;2、选择器通常是需要改变样式的HTML元素;3、每条声明由一个属性和一个值组成;4、属性和属性值被冒号分隔开。
上述就是小编为大家分享的CSS架构中的SMACSS该如何理解了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。
网页标题:CSS架构中的SMACSS该如何理解
网站URL:http://myzitong.com/article/pjpidd.html