css css2 css3_使用CSSDOC可管理CSS

css css2 css3

css css2 css3

I’ve been very interested in finding better ways to create CSS stylesheets that are easy to navigate, understand and maintain. After leaving a stylesheet alone for awhile, if you didn’t take the time to organize the stylesheet originally, it’s really easy to forget why certain rules are being used, or where you defined styles for an area. One way of managing your stylesheets that’s got my attention is CSSDOC.

我一直对寻找更好的方法来创建易于浏览,理解和维护CSS样式表感兴趣。 在将样式表搁置了一段时间之后,如果您没有花时间原本组织样式表,那么很容易忘记为什么要使用某些规则或在某个区域定义样式的地方。 引起我注意的一种管理样式表的方法是CSSDOC。

CSSDOC was an idea apparently conceived sometime in 2007, and the Second Public Draft of the spec was just released on November 16th. The intent behind CSSDOC is to provide a standardized way of commenting CSS making use of the very well known DocBlock way of commenting source-code.

CSSDOC显然是在2007年某个时候构思的,该规范的第二次公开草案于11月16日发布。 CSSDOC的目的是提供一种使用众所周知的DocBlock注释源代码的方式来注释CSS的标准化方法。

DocBlock is a very common form of documenting source code in programming that has proven to be very popular for both PHP and Javascript. The beauty of the method is that it’s so simple to use DocBlock to organize your code and since it’s a standardized format, other developers will be familiar with it and tools can be developed to parse it and auto-generate documentation.

DocBlock是在编程中记录源代码的一种非常常见的形式,事实证明它在PHPJavascript中都非常流行。 该方法的优点在于,使用DocBlock来组织您的代码是如此简单,并且由于它是一种标准化格式,因此其他开发人员将对此很熟悉,并且可以开发工具来解析它并自动生成文档。

There are a great deal of tags being developed for CSSDOC that can provide a lot of great information. For example, here is a sample header from the CSSDOC draft:

为CSSDOC开发了很多标签,它们可以提供很多重要信息。 例如,这是CSSDOC草案的示例标头:

/**
 * Homepage Style
 *
 * Standard Layout (all parts) for Big Little Homepage
 *
 * This style has been designed by Mina Margin. It reflects
 * the composition of colors through the years of the
 * customers project as well as the boldness it implies.
 *
 * @project   Big Little Homepage
 * @version   0.2.8
 * @package   xhtml-css
 * @author    Mina Margin
 * @copyright 2008 by the author
 * @cssdoc    version 1.0-pre
 * @license   GPL v3
 *
 * @colordef  #fff; white
 * @colordef  #808080; standard grey
*/

Just by this simple header, we’ve already provided a great deal of information to both future developers and to a documentation parser. In our header we’ve provided the project we’re working on, a version number for the project, copyright and author information, and some definitions of recurring colors used in the project.

仅通过这个简单的标头,我们就已经为未来的开发人员和文档解析器提供了大量信息。 在标题中,我们提供了我们正在处理的项目,项目的版本号,版权和作者信息,以及该项目中使用的重复颜色的一些定义。

You then make use of the @section and @subsection comments to divide your CSS file into manageable sections of related styles. I’d love to see this implemented in editors like CSSEdit’s @group comment. For those of you unfamiliar, the @group comment in CSSEdit is parsed out and made into easy to navigate folders in the sidebar (see the image below).

然后,您可以使用@section和@subsection注释将CSS文件划分为相关样式的可管理部分。 我很想在CSSEdit的 @group注释等编辑器中实现此功能。 对于不熟悉的人,CSSEdit中的@group注释会被解析出来,并使其易于在侧边栏中浏览文件夹(请参见下图)。

CSS Edit - Screenshot

I won’t go through all the available comments (the draft can give you that and does a great job of explaining), but suffice it to say there’s a lot of extremely useful comments available: @affected comment which describes what browsers are affected by a certain bug/workaround; @tested comments to specify what browsers a certain section has been tested on; @fontdef for font definitions, similar to the @colordef rule in the example above; etc.

我不会浏览所有可用的注释(草稿可以为您提供帮助,并且可以很好地进行解释),但是足以说明有很多非常有用的注释:@affected注释,描述了哪些浏览器受某个错误/解决方法; @tested注释,指定特定部分已在哪些浏览器上进行了测试; @fontdef用于字体定义,类似于上面示例中的@colordef规则; 等等

I’m very excited by this project and think the team behind the spec has done a fantastic job thus far. The few concerns I had, they’ve either addressed, or are in the process of doing so. It’s very easy to get involved with the project as they have been very transparent in the development of the specification.

我对该项目感到非常兴奋,并且认为该规范背后的团队到目前为止做得很棒。 我已经解决或正在解决的一些问题。 参与该项目非常容易,因为它们在规范的开发中非常透明。

In addition, if you want to start playing around with CSSDOC a bit on your own CSS, there are bundles made already for editors like Textmate, EditPlus, and KomodoEdit just to name a few. You can keep up to date on new bundles and snippets at http://cssdoc.net/wiki/EditorIntegration.

另外,如果您想在自己CSS上开始使用CSSDOC,那么已经为Textmate,EditPlus和KomodoEdit等编辑器提供了捆绑软件。 您可以在http://cssdoc.net/wiki/EditorIntegration上了解最新的软件包和摘要。

翻译自: https://timkadlec.com/2008/12/manageable-css-with-cssdoc/

css css2 css3

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值