Vue 代码规范 style

vienceTang
2,108 阅读2分钟

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

代码是写给人看的, 顺便给机器运行 !

前言

上面的两篇文章分别介绍了 Vue 代码中的 script 和 Vue 中的 template 两个部分的代码规范，本文是最后一个部分， Vue 中 style 部分的代码规范。到此 Vue 代码规范已经完结，希望大家能多多点赞，多多支持！

正文

  • 为组件样式设置作用域，一般是在 style标签添加属性 scoped

    App.vue 顶级组件中，它的样式是全局的。

    如何解决单组件样式影响全局呢？官方提供了3中解决方案

    • 在 style标签添加属性 scoped

    • 使用 CSS Modules 来设定 CSS 的作用域

    • 基于 class 的类似 BEM 的策略

    // scoped
<template>
  <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
.button-close {
  background-color: red;
}
</style>

// CSS Modules
<template>
  <button :class="[$style.button, $style.buttonClose]">X</button>
</template>
<!-- 使用 CSS Modules -->
<style module>
.button {
  border: none;
  border-radius: 2px;
}
.buttonClose {
  background-color: red;
}
</style>

// BEM
<template>
  <button class="c-Button c-Button--close">X</button>
</template>
<!-- 使用 BEM 约定 -->
<style>
.c-Button {
  border: none;
  border-radius: 2px;
}
.c-Button--close {
  background-color: red;
}
</style>

  • 不允许使用元素选择器

    在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

    // Bad
<template>
  <p>this is text</p>
</template>

<style scoped>
p {
  color: red;
}
</style>

// Good
<template>
  <p class="text">this is text</p>
</template>

<style scoped>
.text {
  color: red;
}
</style>

  • 属性顺序

    属性应该按照特定的顺序出现保证代码的易读性；

    class 是为了高可复用组件设计的，所以应该处于第一位；

    id 更加具体且应该尽量少使用，所以应该放在第二位。

    • class
    • id
    • name
    • data-*
    • src for type src href value max-length max min pattern
    • placeholder title alt
    • aria-* role
    • required readonly disabled
    <a class="..." id="..." data-modal="toggle" href="#">Example link</a>

<input class="form-control" type="text">

<img src=".." alt="...">

  • boolean 属性

    boolean 属性存在表示取值为 true， 不存在则表示取值为 false。

    <input type="text" disabled>

<input type="checkbox" value="1" checked>

<select>
  <option value="1" selected>1</option>
</select>

  • 属性声明顺序

    • 位置属性：position top left right z-index display float

    • 尺寸大小：width height padding margin

    • 背景边框：background border

    • 文字系列：font-size line-height letter-spacing color text-align

    • 其他： animation transition

  • 缩进：使用 space 两个空格

  • 分号：每个属性声明末尾都要加分号

  • 空格

    • 以下几种情况不需要空格：
      • 属性名后
      • 多个规则的分隔符, 前
      • !important 的 ! 后
      • 属性值中/后/前
      • 行末不要有多余的空格
    • 以下几种情况需要空格：
      • 属性值前/属性名的冒号 : 后
      • 选择器 > + ~ 前后
      • { 前
      • !important 的 ! 前
      • 属性值中的 , 后
      • 注释内容前后
    /* Bad */
.element {
    color :red! important;
    background-color: rgba(0,0,0,.5);
}

/* Good */
.element {
    color: red !important;
    background-color: rgba(0, 0, 0, .5);
}

/* Bad */
.element ,
.dialog{
}

/* Good */
.element,
.dialog {
}

/* Bad */
.element>.dialog{
}

/* Good */
.element > .dialog {
}

/* Bad */
.element{
}

/* Good */
.element {
}

CSS 常用属性名

  • header 头部
  • content/container 内容
  • footer 尾部
  • nav 导航
  • sidebar 侧栏
  • column 栏目
  • wrapper 页面外围控制整体布局宽度
  • left right center 左右中
  • loginbar 登录条
  • logo 标志
  • banner 广告
  • main 页面主体
  • hot 热点
  • news 新闻
  • download 下载
  • friendlink 友链
  • cpyright 版权
  • scroll 滚动
  • tags 标签
  • list 文章列表
  • msg 提示信息
  • tips 小技巧
  • title 栏目标题
  • joinus 计入我们
  • guide 指南
  • service 服务
  • register 注册
  • status 状态
  • vote 投票

参考：

Vue 官网风格指南

avatar
文章
阅读
粉丝