关于CSS自文档的思考_css声明式语言式代码注释

时间: 2018-01-23阅读: 983标签: css
原文出处 Thoughts on Self-Documenting CSS

作者:Keith J. Grant,翻译来源:http://www.zcfy.cc

Robert C. Martin写的《Clean Code》是我读过的最好的编程书籍之一,若没有读过,推荐你将它加入书单。

注释就意味着代码无法自说明 —— Robert C. Martin

Martin在文中详细讨论了代码注释,我不会完全重复他的话。简而言之,他的意思就是,这些注释是注定会过时的。程序执行时会忽视注释,所以无法保证这些说明注释会准确的描述代码作用。所以最好的方式是让代码自说明,如此,按照代码逻辑,程序员和程序获取到的信息是一致的。

思考如下代码

// Check to see if the employee is eligible for full benefits
// 检查员工是否有资格获取全部福利
if ((employee.flags & HOURLY_FLAG) && (employee.age > 65)) {
  …
}

注释有用么?当然有用,但下面的方式可能更好:

if (employee.isEligibleForFullBenefits()) {
  …
}

代码需要“言行一致”,注释是能够被命名良好的函数或变量取代的。Martin的意思并不是说永不使用注释,而是应该尽量避免写注释,注释就意味着代码无法自说明。


那么对css而言呢?

我非常赞同Martin关于注释的看法。当涉及到声明式的语言如css时,就发现了一些有趣的地方。声明式语言式必须符合对应格式的,而css选择器基本是由html结构决定的。对这种代码结构,我们能做的不多,这是否意味着css代码必须注释满天飞?

额,也许吧。有很多的理由使用注释,且注释的写法也有很多。让我们来看一些注释,思考这些注释是否应该添加。先从答案显然的开始吧,然后一步步深入到不那么好判断的。

不好:多此一举的注释


任何语言,多此一举的注释都是多余的,如下的示例出自Bootstrap3的早期版本:

// Addresses
address {…}

显然,address是关于地址的选择器

// Unordered and Ordered lists
ul,
ol {…}

还有?

// Blockquotes
blockquote {…}

赶紧停!

千万不要写那种注释,赶紧删掉这些多余的东西,它仅仅是在重复代码而已。当然,新版本的Bootstrap已经删除掉大部分多此一举的无用注释了。


不好: 块分隔注释

css而言,块分隔注释是非常特殊的,如下:

/* -----------------
 * TOOLTIPS
 * ----------------- */

这种注释能把我逼疯。我能想到为什么会写下这种注释:有时候我们的css会写得非常长,当在超过千行的文件内查找时,就需要这种带特殊标志的注释来帮助快速搜索。

但事实上,很长很长的css文件已经不再流行了。若你的项目确实需要这种很大的css文件,它应该是由多个小的部分,通过css预处理工具组合而成的。


不好:解释语法

又要用Bootstrap举例了,以下代码出自 _tooltips.scss:

// Allow breaking very long words so they don't overflow the tooltip's bounds
// 设置长单词换行
word-wrap: break-word;

这种方式和“多此一举的注释”类似,注释解释word-wrap属性的作用。这里有一篇文章讲到这种注释为什么不需要的原因,注释应该解释“为什么”,而不是“是什么”,即说明原因而不是说明作用(Why, not what)

此处有一个例外,由于css有很多属性,也许有些属性是你完全不知道的,那么你用这种注释是正常的。


不好:对库进行介绍

如下是Bootstrap tooltips.scss文件的另一段注释:

// Our parent element can be arbitrary since tooltips are by default inserted as a
// sibling of their target element. So reset our font and text properties to avoid
// inheriting weird values.
// 由于提示框会被默认插入到目标元素后作为一个兄弟元素,
// 所以需要重置提示框的字体属性避免从父元素继承样式影响。
@include reset-text();
font-size: $font-size-sm;

这条注释很有意思,看起来似乎并不违反“说明原因而不是说明作用?”规则,它表明由于可能会被一些意料之外的继承字体属性影响,所以用导入的方式来重置字体属性。

但进一步来看,显然在文件头导入重置样式的唯一的解释就是担心被继承样式影响。

所以,我认为这种注释也是不需要的,因为导入函数名字已经说明用途了,尽量让函数名切合作用,如reset-inherited-font或类似的名字,不仅清晰说明了用途还是说明了原因。这个是一个函数调用,函数名已经足够解释了。优先用这种方式来说明用途可以替代一些注释。

CSS预处理器让CSS更接近传统编程语言。尽可能使用命名良好且有意义的变量和函数,这样能让代码更清晰。


不好: 过时的注释

.dropdown-header {
  …
  white-space: nowrap; // as with > li > a
}

“as with > li > a”是什么意思?我第一反应就是也许在文件中还有一个> li > a的选择器,而这行代码就是指那个选择器。也许文件中有一段注释会专门解释为何这样写,但我将文件重头到尾都看了一边,发现并没有这个选择器。文件只有一个.dropdown-item选择器下有一个nowrap属性,也许是就是指这个?或者也许这段注释是指某行已经被删除的代码或引入其他文件中的代码?若想要彻底弄清楚这个注释的作用,唯一的方法就是翻遍整个git记录了吧。

这是一个过时的注释,也许它以前是有用的,但却长时间没有用到,所以过时了。这也许就是为什么Robert Martin对注释的看法:若注释对应的代码更新了注释就没用了,甚至更糟糕,注释可能会将你引到错误的方向。若发现这样的注释,一定要删掉。它完全没用,而且会浪费时间去思考到底有啥用?


有时有用的:有特殊意义的注释

如下是一段带注释的代码:

.dropdown-item {
  display: block;
  width: 100%; // For `<button>`s
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  clear: both;
  font-weight: $font-weight-normal;
  color: $dropdown-link-color;
  text-align: inherit; // For `<button>`s
  white-space: nowrap;
  background: none; // For `<button>`s
  border: 0; // For `<button>`s
}

这样的注释就是有用的,它们能告诉我们,这些特定的属性是为覆盖<button>样式而写的。这样的注释就是有用的,因为有时候代码的意图不是那么显而易见的。

但此时也需要问一个问题:有什么办法能让代码自说明呢?需要可以考虑将这些特定的属性移到第二个选择器中,专门为这些按钮设置的选择器。

.dropdown-item {
  display: block;
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  clear: both;
  font-weight: $font-weight-normal;
  color: $dropdown-link-color;
  white-space: nowrap;
}

button.dropdown-item {
  width: 100%;
  text-align: inherit;
  background: none;
  border: 0;
}

这样就非常清晰且易于理解,但副作用就是:专门增加了一个特殊的选择器。

而相反,我认为这种方式非常利于使用mixin混入模式。重构为一个函数,该函数能在其他地方定义,并且让代码更清晰。考虑如下代码:

.dropdown-item {
  @include remove-button-styles;

  display: block;
  width: 100%;
  padding: $dropdown-item-padding-y $dropdown-item-padding-x;
  clear: both;
  font-weight: $font-weight-normal;
  color: $dropdown-link-color;
  white-space: nowrap;
}

这段代码没有用任何注释,但其功用很清晰,因为它使用的公用函数在其他模块也能用到。我将width:100%保留下来而不是移到函数中,因为若将函数混和代码时,width:100%可能会引起一些其他问题。

在我开始发现“代码异味(Code Smell)”之前,一开始.dropdown-item代码有十行,我非常喜欢用mixin,mixin是一个能极大减少代码行数的好东西,它能让我们快速的知道代码的大致用途。

虽然使用函数重构代码并不是都这样有效,但尽量多用。


好:注解难懂的补丁性的代码

我对注释也不是总那么苛刻的,比如我就很难找到下面的注释的问题,若你曾看过normalize.css的源码,你一定会注意到它满满的注释,不得不说,真是“极好的”注释。

欣赏一番:

/**
 * 1. Add the correct box sizing in Firefox.
 * FF下正常的盒子模型
 * 2. Show the overflow in Edge and IE.
 * 在Edge和IE下overflow为visble
 */
hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

若没有这些注释,你永远不知道为何这样写。修复特定浏览器bug的代码往往是晦涩难懂的,常常会被当做无用代码删掉。

由于Normalize库的目标是提供一个完全一致样式环境,所以需要很多这样的注释。选择器都是类型和属性选择器,没有任何class名,同时由于不是可命名的class名,所以自文档非常困难。

如下为另一段Bootstrap的注释:

/* Chrome (OSX) fix for https://github.com/twbs/bootstrap/issues/11245 */
select {
  background: #fff !important;
}

一个Github链接,非常有用。即使不打开连接也能知道这儿是一个bug,而且有可能是一个非常难定位的bug。若有需要,可以通过链接获取更多信息。最棒的是,因为没有大段大段的文本去解释bug,所以它并不会打乱代码逻辑,同时也告诉我们哪里可以获取更多信息。若使用项目与事务跟踪工具如JIRA,那么可以直接在注释中与编号关联起来。

当然,不是每个打补丁的代码都要这样注释,但若bug不是那么容易发现,而且与浏览器怪癖有关,那么还是这样注释吧。


好:指令式注释

一些工具KSS , 会在CSS文件中创建一些样式规范。如下:

/*
Alerts
An alert box requires a contextual class to specify its importance.
一个警告信息框需要与语境有关的的类来指定其重要性

Markup:
<div>
  Take note of this important alert message.
</div>

alert-success   - Something good or successful 好的或成功的
alert-info      - Something worth noting, but not super important 不那么重要的
alert-warning   - Something to note, may require attention 需要被提示并记录,需要引起注意的
alert-danger    - Something important. Usually signifies an error. 非常重要的,常用于错误

Styleguide Alerts
*/

这不仅仅是注释,这是规范,它能被KSS解析并用于生成html。这已经算是项目文档的一部分了,而且不得不说,这比手动创建一个分离的html文件要好很多,因为其在同一个文件内且始终与代码相匹配。

另外一种指令式注释为许可信息,当使用第三方库并在注释中注明许可信息时,一般都需要包含。

而我贴出Robert Martin关于注释的话时 Robert Martin 的话 ,似乎应该解释一下,但没有那么做。因为我认为这是一句容易理解的话,若你还在代码中到处写注释,那么请先思考是否合理。


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/382

css常用代码

禁止div点击;鼠标放置显示“小手”手势,并显示提示文字;超出区域的文字显示省略号;div+css控制图片等比例缩放;设置元素在另一个元素的最底部;设置背景颜色,不透明度

为什么Web开发人员不用最新的CSS功能

尽管CSS每年都会发布全新的特性,但实际上这些新功能很少会被web开发人员实际在生产项目中使用到,甚至去了解它们的动力也不会比去多完成几个需求更多。那究竟是什么原因导致的呢?

css加载会造成阻塞吗?

js执行会阻塞DOM树的解析和渲染,那么css加载会阻塞DOM树的解析和渲染吗?所以,接下来我就来对css加载对DOM树的解析和渲染做一个测试。为了完成本次测试,先来科普一下,如何利用chrome来设置下载速度

CSS中的一些细节

当position设置为:absolute或者fixed时,元素的display会转换为block。(设置float也会产生这样的效应)正常情况下,div会被内容撑开,但是如果设置了1.的情况下,父元素就会产生塌陷,失去高度。

用 CSS background 实现刻度线的呈现

简单的实现方式,大致有两种:一是用图片做背景,横向平铺线条图片;二是给每一块刻度区域平铺一个元素,然后用边线实现。身为一个“环保主义者”,这两种方式都不能让我满意。在看了 Lea Verou 的 CSS SECRETS 后,我受到了启发——可以用渐变背景的方式去实现。

20条书写CSS代码

在这篇文章中,我想跟你分享 20 条由 CSS 社区推荐的约定和最佳实践。 有些建议可能比较适合新手,而有些则更高级一些,但我希望每个人都可以在本篇文章中收获自己不知道的知识。

精简CSS代码,提高代码的可读性和加载速度

定义简洁的CSS规则:CSS的每条规则中都包含了规则的属性及属性值。定义简洁的CSS规则主要是指合并相关规则和定义简洁的属性值。

原来 CSS 这样写是会让 App 崩溃的

之前在自己的个人公众号中提到了一篇利用 CSS 的方式进行 XSS 攻击,当时有朋友跟我说,让我去获取那个网站的 cookie,再然后进入那个网站的后台去玩。然而,技术能力实在有限,搞不了这些东西

css数值(百分比|负值)

今天为什么要给大家讲解这个东西呢,因为css这部分,尤其是数值这部分感觉非常简单,但是尤其是简单的,却很多人根本就没有弄懂。所以今天就来讲一下css的数值问题吧。大家还是好好听一下吧。

如何通过CSS向JS传参?

CSS中有很多媒体查询的用法,例如设备尺寸判别,是否支持鼠标行为,是否是黑暗模式,是否是省电模式等。CSS可以自动检测,但是有时候,在JS中,我们也需要根据不同的系统主题,然后实现不同的交互逻辑,或者渲染出不一样的内容。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广