Vue code specification style

Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Code is written for people to see, incidentally to the machine to run!

preface

The previous two articles introduced the code specification for script and Template in Vue, respectively. This article is the last one, the code specification for style in Vue. To this Vue code specification has come to an end, I hope we can praise a lot, a lot of support!

The body of the

• Set the scope for the component style, typically by adding the property scoped to the style tag

  In the app.vue top-level component, its style is global.

  How do you address the global impact of a single component style? Officials offer three solutions

  • Add the property scoped to the style tag

  • Use CSS Modules to set the scope of CSS

  • Class – based BEM – like policies

  // scoped <template> <button class="button button-close">X</button> </template> <! <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> <! <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> <! <style>. C -Button {border: none; border-radius: 2px; } .c-Button--close { background-color: red; } </style>Copy the code

• Element selectors are not allowed

  In the Scoped style, class selectors are better than element selectors because element selectors are slow to use in large quantities.

  // 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>
  Copy the code

• Attribute order

  Attributes should appear in a specific order to make code readable;

  Class is designed for highly reusable components and should come first;

  Id is more specific and should be used sparingly, so it should come second.

  • 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="..." >Copy the code

• Boolean attribute

  Boolean If the Boolean attribute exists, the value is true; if it does not, the value is false.

  <input type="text" disabled>
  
  <input type="checkbox" value="1" checked>
  
  <select>
    <option value="1" selected>1</option>
  </select>
  Copy the code

• Order of property declaration

  • Position top left right Z-index display float

  • Width height Padding Margin

  • Background border: background border

  • Font-size line-height letter-spacing color text-align

  • Other: Animation Transition

• Indent: Use two Spaces, space

• Semicolon: Each attribute declaration ends with a semicolon

• The blank space

  • Spaces are not required in the following cases:
    • The property name after
    • Delimiters for multiple rules. 前
    • ! important 的 ! 后
    • Property value medium/back/front
    • Don’t have extra space at the end of the line
  • Spaces are required in the following cases:
    • Colon before attribute value/attribute name: 后
    • The selector> + ~Before and after
    • { 前
    • ! important 的 ! 前
    • Property value. 后
    • Before and after comments

  /* 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{}Copy the code

CSS Common attribute names

• headerThe head
• content/containercontent
• footerThe tail
• navnavigation
• sidebarThe sidebar
• columnThe column
• wrapperThe periphery of the page controls the overall layout width
• left right centermonitored
• loginbarLog on to the
• logomark
• banneradvertising
• mainPage body
• hothot
• newsnews
• downloaddownload
• friendlinkFriends of the chain
• cpyrightcopyright
• scrollrolling
• tagsThe label
• listThe article lists
• msgPrompt information
• tipstip
• titleColumn headings
• joinusIncluded in the us
• guideguide
• serviceservice
• registerregistered
• statusstate
• votevote

Reference:

Vue official website style guide