Require shorthand properties (要求简写属性)

文章为csslint中文版译文,点击原文可查看英文版,如遇到翻译错误或错别字啥的,请留言指出~ 译文内容不定期更新~ 返回目录

有时咱们编写一条规则时,使用简写来代替多属性定义会更好,例如:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

此四属性可以组合成一个margin属性,如下:

.mybox {
    margin: 20px 10px 30px;
}

使用简写属性可以帮助减少CSS体积的大小。

规则详情

规则 ID: shorthand

此规则意在 检索出可简写的属性来减少文件体积。因此,在如下示例中 提示警告:

  1. margin-left,margin-right,margin-top,margin-bottom在同一规则中使用时。
  2. padding-left,padding-right,padding-top,padding-bottom在同一规则中使用的。

以下示例 提示警告:

.mybox {
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.mybox {
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 20px;
    padding-bottom: 30px;
}

以下示例 不提示警告:

/* only two margin properties*/
.mybox {
    margin-left: 10px;
    margin-right: 10px;

}

/* only two padding properties */
.mybox {
    padding-right: 10px;
    padding-top: 20px;
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,680评论 1 92
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,717评论 0 1
  • 文章为csslint中文版译文,点击原文可查看英文版,如遇到翻译错误或错别字啥的,请留言指出~ 译文内容不定期更新...
    唐小律阅读 3,077评论 0 0
  • •前端面试题汇总 一、HTML和CSS 21 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? ...
    Simon_s阅读 6,568评论 0 8
  • 现在才谈部电影,是不是过时了?没办法,我今天才抽出空来,把这个电影看完,说实话和我预期的差距有点大! ...
    亲爱的小鱼老师阅读 4,655评论 0 1