CSS SMACSS简单介绍

快乐打工仔 分类:实例代码

SMACSS的全程是Scalable and Modular Architecture for CSS。

翻译成中文也就是可扩展和模块化的CSS架构。

SMACSS将样式分成5种类型:

(1).Base:

基础样式表,定义了基本的样式。

平时写CSS比如reset.css就是属于基础样式表,另外我认为清除浮动,一些动画也可以归类为基础样式。

(2).Layout:

布局样式,用于实现网页的基本布局,搭起整个网页的基本骨架。

(3).Module:

网页中不同的区域有这个不同的功能,这些功能是相对独立的,我们可以称其为模块。模块是独立的,可重用的组件,它们不依赖于布局组件,可以安全的删除修改而不影响其他模块。

(4).State:

状态样式,通常和js一起配合使用,表示某个组件或功能不同的状态,比如菜单选中状态,按钮不可用状态等。

关于状态样式,我个人觉得要分情况进行讨论:

1).不同组件的同一状态的样式是一样的,比如头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是一样的,我认为这部分状态样式可以归类为State

2).不同组件的统一状态的样式是不一样的,即两个地方的菜单虽然都是选中状态,但是他们却又不同的选中样式,这部分样式不应该被认为是State类型,而是应该放在其组件对应的Module中。

(5).Theme:

皮肤样式,对于可更换皮肤的站点来说,这个是很有必要的,分离了结构和皮肤,根据不同的皮肤应用不同的样式文件。

回复

我来回复
  • 暂无回复内容