SMACSS:一个关于CSS的最佳实践-1.Overview

时间:2022-04-19 22:06:41

什么是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类:

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

我们经常不会区分CSS规则的类别,而将所有的CSS规则写在一块。SMACSS的这种行为其实正是OO所谓的封装和模块化。封装的好处显而易见。SMACSS针对每个类别都提出了最佳实践。

  Base规则指的是默认的CSS规则,比如说一些Normalize或者Reset之类的CSS。本质上说,base style指的是不管element是否在页面上,它都应该长这样。

 html, body, form { margin:; padding:; }
input[type=text] { border: 1px solid #999; }
a { color: #039; }
a:hover { color: #03C; }

Examples of Base Styles

  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