CSS样式编写的简明指南

时间:2021-05-08


复制代码代码如下:[selector]{
[property]:[value];
[<- Declaration ->]
}</p><p>[选择器]{
[属性]:[值];
[<- 声明 ->]
}

编写 CSS 样式时,我习惯遵守这些规则:

class 名称以连字符(-)连接,除了下文提到的 BEM 命名法;
缩进 4 空格;
声明拆分成多行;
声明以相关性顺序排列,而非字母顺序;
有前缀的声明适当缩进,从而对齐其值;
缩进样式集从而反映 DOM;
保留最后一条声明结尾的分号。

例如:

CSS Code复制内容到剪贴板
  • .widget{
  • padding:10px;
  • border:1pxsolid#BADA55;
  • background-color:#C0FFEE;
  • -webkit-border-radius:4px;
  • -moz-border-radius:4px;
  • border-radius:4px;
  • }
  • .widget-heading{
  • font-size:1.5rem;
  • line-height:1;
  • font-weight:bold;
  • color:#BADA55;
  • margin-right:-10px;
  • margin-left:-10px;
  • padding:0.25em;
  • }
  • 我们可以发现,.widget-heading 是 .widget 的子元素,因为前者的样式集比后者多缩进了一级。这样通过缩进就可以让开发者在阅读代码时快速获取这样的重要信息。

    我们还可以发现 .widget-heading 的声明是根据其相关性排列的:.widget-heading 是行间元素,所以我们先添加字体相关的样式声明,接下来是其它的。

    以下是一个没有拆分成多行的例子:

    CSS Code复制内容到剪贴板
  • .t10{width:10%}
  • .t20{width:20%}
  • .t25{width:25%}
  • .t30{width:30%}
  • .t33{width:33.333%}
  • .t40{width:40%}
  • .t50{width:50%}
  • .t60{width:60%}
  • .t66{width:66.666%}
  • .t70{width:70%}
  • .t75{width:75%}
  • .t80{width:80%}
  • .t90{width:90%}
  • 在这个例子(来自inuit.css’s table grid system)中,将 CSS 放在一行内可以使得代码更紧凑。

    声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

    相关文章