日期:2014-04-22  浏览次数:21243 次

文章简介:如何使用Sass和SMACSS维护CSS。

我们一直以来都是SMACSS的忠实粉丝,然而一个纯SMACSS方法最适合于一个全新的项目中的普通CSS。我们的市场网站,我们使用了Sass编写样式,而且里面还有好几年的CSS遗留物。

我们最近在精减我们的CSS,让我们的团队更方便的维护,而在精减过程中,我们团队并没有扔掉我们现有的样式或者从零开始。

我们基于SMACSS方法着手解决SMACSS和OOCSS的问题,但从BEM和Toadstool我们也有一些修改和一些想法。

注意:你将需要对SMACSS有点了解,如果你不了解,可以点击这里。

SMACSS的呈现

SMACSS定义了五种样式类型:

  • Base (基本)
  • Layout(布局)
  • Module (模块)
  • State (状态)
  • Theme (皮肤)

我们的方法看起来像这样: