Alice CSS:样式库解决方案-写CSS的更好方案

Alice

CSS 是一门灵活的语言,通常来说,实现一个效果都有数个方法可以实现。而且每个方法的效率都几乎无差。我们很难从 CSS 代码上从太多限制。而却可以从样式的风格上做限定。如果我们风格统一,那么代码将是有规可循的。我们可以根据命名了解结构,根据结构理解构建的代码原理。对于跨产品团队的合作,将是无缝的;对于多人 debug 也将是无碍的。Alice 提供一个 base.css 作浏览器限定,一个 《CSS 规范》作编码约定,一个《样式库构建规范》作团队协作和积累约定。并提供一个解决浏览器兼容的样式工具库,以及多种插件。或许你应该从今天就开始使用她来管理你团队的样式。

一、或许几句话你就明白了

Alice 是一个解决方案,最重要的文档是:《样式库构建规范》。几乎所有这个网站的涉及的所有代码和文档都存储于 Github 上,所有 Github 上的代码都以 MIT License 开源。要获取所有代码和文档,你需要了解 Github 仓库,至少了解如何下载到所有内容的 ZIP 压缩文件。你可以通过下面这个按钮 Fork,或者直接在代码主页下载 ZIP 文件:

Fork 或者直接到 Github 上下载/Clone https://github.com/sofish/Alice

Github Repo

二、如何使用 Alice CSS

在说如何使用之前,让我们先了解一下 Alice CSS 的构成,她包括 3 部分:

  1. 基础:base.css

    所有代码都基于这个文件。重设浏览器,解决依赖引起的耦合问题。

  2. 规范:CSS 规范 / 样式库构建规范

    Alice 的核心所在。统一团队编码规范和风格。让所有代码都是有规可循的,并且能够得到沉淀,减少重复劳动。

  3. 工具:通用兼容解决方案库

    解决浏览器的兼容问题,把前端工程师最痛苦的兼容问题先解决。

    编辑器插件(语法自动完成):VIM / Coda / Eclipse 更多插件,请访问 plugins/ 下载

  4. 模板文件:一般组件 DOM 结构参考

    抽象组件模板,一套 HTML,构建多套外观。

  5. 样式库:根据团队需要构建
  6. 团队在代码和规范上的沉淀。让工程师只专注于自己的代码开发,而又能迅速熟知结构和使用别人的代码。

如果只是构建一个简单的,单一页的页面,你可以只引用 base.css 来提供你最简单的浏览器重设、清理 CSS 浮动等小功能。遵循《CSS 规范》可以让你的代码写得更容易阅读,更容易维护。

如果你构建的页面有可重用的,那么你应该抽象出重用的模块,遵循《样式库构建规范》,构建结构有规可循的组件代码。并形成产品的样式库。有时候只有当我们把代码本身也形成为产品的时候,才真正懂得如何去书写、维护她们。

更详细的 Alice CSS 介绍,请看:《样式库构建规范

“Alice CSS:样式库解决方案-写CSS的更好方案”的9个回复

发表评论

电子邮件地址不会被公开。 必填项已用*标注