什么是SMACSS?
SMACSS(发音"smacks"),全称Scalable and Modular Architecture for CSS。顾名思义,SMACSS是一个可扩展的,模块化的CSS架构。它不是一个CSS框架,而是一个指南,一个CSS设计的最佳实践。SMACSS旨在规范一种统一的CSS开发方式,以便开发人员能够更好的开发和维护CSS代码。
为什么要SMACSS?
对于软件系统来说,不管使用何种语言,何种编程思想,有几个要求总是永恒不变的:可重用,可扩展,可维护。对于小项目来说,痛点并不明显。但随着项目规模的增大,难重用,难扩展,难维护的痛点越来越被放大,这个时候,一个良好的架构就至关重要。SMACSS可以帮助我们以更良好的模式来设计开发CSS,从而达到可重用,可扩展,可维护的目的。SMACSS适合任意规模的项目,而不必担心过度设计。
SMACSS最佳实践
目前有一种设计思路很好的解决了可重用,可扩展,可维护的问题,那就是面向对象设计(OO)。许多设计无非是贯彻了OO编程思想,SMACSS也不例外。下面简单介绍些SMACSS的主要内容:
1.分类CSS规则
任何项目都需要良好的组织。没有规划,没有组织的往文件里面添加CSS规则会对后期的开发和维护带来严重的阻碍。
SMACSS的核心是分类CSS规则,通过分类,我们可以将CSS规则归为不同的模式,并对每种模式定义更好的实践。SMACSS将CSS规则分为以下5类:
- Base
- Layout
- Module
- State
- Theme
我们经常不会区分CSS规则的类别,而将所有的CSS规则写在一块。SMACSS的这种行为其实正是OO所谓的封装和模块化。封装的好处显而易见。SMACSS针对每个类别都提出了最佳实践。
Base规则指的是默认的CSS规则,比如说一些Normalize或者Reset之类的CSS。本质上说,base style指的是不管element是否在页面上,它都应该长这样。
![](https://i-blog.csdnimg.cn/blog_migrate/8f900a89c6347c561fdf2122f13be562.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/961ddebeb323a10fe0623af514929fc1.gif)
1 html, body, form { margin: 0; padding: 0; } 2 input[type=text] { border: 1px solid #999; } 3 a { color: #039; } 4 a:hover { color: #03C; }
Layout规则负责页面的布局,layout可以包含一个或多个modules。
Module规则是模块化的,可重用的CSS规则。它们可以是菜单,弹出框,产品列表等等。
State规则描述的是layouts或modules的一个特殊的状态,hidden或是expanded?active或是inactive?
Theme规则顾名思义,它指的是所有layouts和modules的look and feel。当然,很多网站不需要Theme.css来提供更多的网站主题。
2.规范命名规则
通过命名规则,我们可以快速的知道一个CSS规则属于什么类别。在大型项目中,CSS规则往往细分在许多文件中,在这种情况下,命名规则可以帮助我们快速的找到对应的文件。
对于layout规则,一般使用 l- 或 layout- 作为前缀。对于state规则,一般使用 is- 作为前缀,比如 .is-hidden 或 .is-collapsed 。modules规则作为最主要的一类css规则,如果使用 module- 作为前缀,会显得有些冗余,所以SMACSS建议直接使用module名称,而不需要任何前缀。
/* Example Module */ .example { } /* Callout Module */ .callout { } /* Callout Module with State */ .callout.is-collapsed { } /* Form field module */ .field { } /* Inline layout */ .l-inline { }
3.选择符书写建议
SMACSS简单的介绍了浏览器是如何解析CSS的,并基于此对如何书写选择符以及优化选择符性能,提出了建议。
结束语
本文给出了SMACSS的overview,希望读者能对SMACSS有个全局的了解。SMACSS的具体内容将会在后面的文章陆续放出,尽请期待。
相关阅读
下一章 SMACSS:一个关于CSS的最佳实践-2.Base Rules