关于一些小细节

  1. 在提交代码之前，把代码中的打印输出之类删除，比如：console.log()

一、目录结构

  1. 这个主要是看框架，根据原本框架怎么命名就怎么规范命名

    二、HTML

  2. HTML属性应该按照特定的顺序出现以保证易读性

    1. id class name data-xxx src, for, type, href title, alt aria-xxx, role value style

  3. 若是空元素标签，就使用自闭和的方式编写，代码

    二、CSS

  4. 一行代码结束，在末尾添加上分号 ```css / bad / div { color: red }

/ good / div { color: red; }

  2. 2. 流。尽量不要改变元素默认行为。保持默认的文本流。比如，
  3. ```css
  4. /* 移出一个图片下面的一个白块，不影响原本的显示：*/
  5. /* bad */
  6. img {
  7.   display: block;
  8. }
  10. /* good */
  11. img {
  12.   vertical-align: middle;
  13. }
  15. /* 类似的，尽量不要改变浮动方式。 */
  16. /* bad */
  17. div {
  18.   width: 100px;
  19.   position: absolute;
  20.   right: 0;
  21. }
  23. /* good */
  24. div {
  25.   width: 100px;
  26.   margin-left: auto;
  27. }
  1. 选择器 ```css / 紧密耦合DOM选择器，三个层级以上建议加class： / / bad / div:first-of-type :last-child > p ~ *

/ good / div:first-of-type .info

/ 紧密耦合DOM选择器，三个层级以上建议加class： / / bad / img[src$=svg], ul > li:first-child { opacity: 0; }

/ good / [src$=svg], ul > :first-child { opacity: 0; }

  2. 4. 指明
  3. ```css
  4. /* 不要让代码难于重写，让选择器更精确，减少ID、避免使用!important */
  5. /* bad */
  6. .bar {
  7.   color: green !important;
  8. }
  9. .foo {
  10.   color: red;
  11. }
  13. /* good */
  14. .foo.bar {
  15.   color: green;
  16. }
  17. .foo {
  18.   color: red;
  19. }
  1. 覆盖 ```css / 覆盖样式会使维护和调试更困难，所以要尽量避免。 / / bad / li { visibility: hidden; } li:first-child { visibility: visible; }

/ good / li + li { visibility: hidden; }

  2. 6. 继承
  3. ```css
  4. /* 不要把可继承的样式重复声明： */
  5. /* bad */
  6. div h1, div p {
  7.   text-shadow: 0 1px 0 #fff;
  8. }
  10. /* good */
  11. div {
  12.   text-shadow: 0 1px 0 #fff;
  13. }
  1. 简洁性 ```css / 保持代码的简洁。使用属性缩写。不必要的值不用写。 / / bad / div { transition: all 1s; top: 50%; margin-top: -10px; padding-top: 5px; padding-right: 10px; padding-bottom: 20px; padding-left: 10px; }

/ good / div { transition: 1s; top: calc(50% - 10px); padding: 5px 10px 20px; }

  2. 8. 语言
  3. ```css
  4. /* 能用英文的时候不用数字。 */
  5. /* bad */
  6. :nth-child(2n + 1) {
  7.   transform: rotate(360deg);
  8. }
  10. /* good */
  11. :nth-child(odd) {
  12.   transform: rotate(1turn);
  13. }
  1. 动画 ```css / 除了变形和改变透明度用animation，其他尽量使用transition。 / / bad / div:hover { animation: move 1s forwards; } @keyframes move { 100% { margin-left: 100px; } }

/ good / div:hover { transition: 1s; transform: translateX(100px); }

  2. 10. 单位。这个先占个位
  3. ```css
  4. /* 可以不用单位时就不用。建议用rem。时间单位用s比ms好。 */
  1. 颜色 ```css / 需要做透明效果是用rgba，否则都用16进制表示： / / bad / div { color: hsl(103, 54%, 43%); }

/ good / div { color: #5a3; } ```


  1. 三、JavaScript