欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

SMACSS:一个关于CSS的最佳实践-Overview_html/css_WEB-ITnose

程序员文章站 2022-05-03 13:49:56
...
什么是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是否在页面上,它都应该长这样。

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的具体内容将会在后面的文章陆续放出,尽请期待。