值得了解的css代码规范

Css规范

CSS是一个前端的基本功,但是每个人写代码的习惯不同,这不利于团队协作开发,所以一套自己认可,他人认可的CSS规范是必不可少的。希望对大家能有所帮助

大家可以根据自己的习惯进行微调,但大方向不应该改变。

1.缩进

✅使用四个空格来代替制表符 (tab) 缩进。

.element {
    position: absolute;
    top: 10px;
    left: 10px;

    border-radius: 10px;
    width: 50px;
    height: 50px;
}

2.分号

✅每个属性声明末尾都要加分号。「.sass」文件除外。

.element {
    width: 20px;
    height: 20px;

    background-color: red;
}

3.空格

🚨以下几种情况不需要空格:
  • ✅属性名后
  • !important 「!」后
/* bad */
.element {
    color :red! important;
}
/* good */
.element {
    color: red !important;
}
  • 多个规则的分隔符「,」前
/* bad */
.element ,
.dialog{
    ...
}
/* good */
.element,
.dialog {
    ...
}
  • 属性值中「(」后和「)」前
/* bad */
@media screen and ( max-width: 300px ){
    body {
        background-color:lightblue;
    }
}
/* good */
@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}
  • 行末不要有多余的空格
🚨以下几种情况需要空格:
  • ✅每条声明语句的「:」后
  • ✅选择器「>」、「+」、「~」前后
  • ✅在每个声明块的左花括号前,「{」前
  • !important「!」前
  • 属性值中的「,」后
  • 注释「*」后和「*/」前

4.换行

🚨以下几种情况不需要换行:

  • 「 { 」前

🚨以下几种情况需要换行:

  • 「 { 」后和「 } 」前
  • 每个属性独占一行
  • 多个规则的分隔符「 , 」后
/* bad */
.selector, .selector-secondary, .selector[type=text]{
    padding:15px;
    margin:0px 0px 15px;
    background-color:rgba(0, 0, 0, 0.5);
    box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* good */
.selector,
.selector-secondary,
.selector[type="text"] {
    margin-bottom: 15px;
    padding: 15px;

    background-color: rgba(0, 0, 0, .5);

    box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

5.引号

🚨✅最外层统一使用双引号;

🚨url的内容要用引号;

🚨属性选择器中的属性值需要引号。

.element:after {
    content: "";

    background-image: url("logo.png");
}

li[data-type="single"] {
    ...
}

6.命名

🚨按照 BEM 的规则命名(注意命名规则也不是唯一的,可自行根据团队选择)

.template-card{
    ...
}

.template-card__image{
    ...
}

.template-card__image—active{
    ...
}

7.颜色

🚨✅颜色16进制用小写字母;
🚨✅颜色16进制尽量用全写;

/* bad */
.element {
    color: #ABCDEF;
    background-color: #001122;
}

/* good */
.element {
    color: #abcdef;
    background-color: #012;
}

8.属性简写

📌在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明。

常被滥用的简写属性如下:

  • padding
  • margin
  • font
  • background
  • border
  • border-radius

大部分情况下,我们不需要为简写形式的属性声明指定所有值。例如,HTML 的标题元素只需要设置上、下边距(margin)的值,因此,在必要的时候,只需覆盖这两个值就可以了。0 值表示对浏览器默认值或以前指定的值的覆盖。

过度的使用属性简写会导致代码出现不必要的覆盖和意外的副作用。

PS:简写属性也会对性能或多或少的有些影响

/* bad */
.element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
}

/* good */
.element {
    margin-bottom: 10px;
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;

    background-color: red;
    background-image: url("image.jpg");
}

9.属性声明顺序

📌✅相关的属性声明按顺序做分组处理,组之间需要有一个空行。

这是推荐的属性的顺序

总结如下:

  1. Display & Flow
  2. Positioning
  3. Dimensions
  4. Margins, Padding, Borders, Outline
  5. Typographic Styles
  6. Backgrounds
  7. Opacity, Cursors, Generated Content
.declaration-order {
    display: block;
    float: right;

    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;

    border: 1px solid #e5e5e5;
    border-radius: 3px;
    width: 100px;

    height: 100px;
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    text-align: center;

    color: #333;
    background-color: #f5f5f5;

    opacity: 1;
}

10.带前缀的属性

📌✅当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

.element {
    -webkit-border-radius: 3px;
       -moz-border-radius: 3px;
            border-radius: 3px;

    background: -webkit-linear-gradient(top, #fff 0, #eee 100%);
    background:    -moz-linear-gradient(top, #fff 0, #eee 100%);
    background:         linear-gradient(top, #fff 0, #eee 100%);
}

11.清除浮动

📌 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。

.clearfix {
    /**
     * IE < 8
     * Include this rule to trigger hasLayout and contain floats.
     */
    zoom: 1;

    /**
     * For modern browsers
     * 1. The space content is one way to avoid an Opera bug when the
     *    contenteditable attribute is included anywhere else in the document.
     *    Otherwise it causes space to appear at the top and bottom of elements
     *    that are clearfixed.
     * 2. The use of `table` rather than `block` is only necessary if using
     *    `:before` to contain the top-margins of child elements.
     */
    >:before,
    >:after {
        content: " "; /* 1 */
        display: table; /* 2 */
    }
    >:after {
        clear: both;
    }
}

12.Less 和 Sass 中的嵌套

📌避免不必要的嵌套。

这是因为虽然你可以使用嵌套,但是并不意味着应该使用嵌套。只有在必须将样式限制在父元素内(也就是后代选择器),并且存在多个需要嵌套的元素时才使用嵌套。

/* bad */
.table > thead > tr > th {
    ...
}
.table > thead > tr > td {
    ...
}

/* bad */
.table > thead > tr {
    > th {
        ...
    }
    > td {
        ...
    }
}

/* best use bem */
.table {
    > >__item {
        ...
    }
}

13.注释

💡请确保你的代码能够自描述、注释良好并且易于他人理解。好的代码注释能够传达上下文关系和代码目的。不要简单地重申组件或 class 名称。

对于较长的注释,务必书写完整的句子;对于一般性注解,可以书写简洁的短语。

/* bad */
/* Modal header */
.modal-header {
    ...
}

/* good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
    ...
}

参考文章

相关推荐
©️2020 CSDN 皮肤主题: 博客之星2020 设计师:CY__ 返回首页