Guidelines & Workflows

Guidelines & Workflows

css

• 沒有依 font-size 調整元素尺寸的需求，因此不要用 rem 或 em。
• 唯有必要加 parent selector & 時，才加：

  // bad
  .block
    max-width: 800px
    & .wrapper
      display: flex
    &__title
      font-size: 40px
  
  // good
  .block
    max-width: 800px
    .wrapper
      display: flex
    &__title
      font-size: 40px

media queries

styles 的撰寫為 mobile-first： 自 #19 後，請使用統一的 SASS breakpoints mixin 來做 media queries，保持一致性。

• 使用方式參考：

  /* css properties of mobile */
  #test
    color: red
  
  /* NOT A DEFAULT QUERY, add when we want to handle landscapes */
  @include media-breakpoint-only(sm)
    #test
      color: green
  
  @include media-breakpoint-up(md)
    #test
      color: blue
  
  /* NOT A DEFAULT QUERY, add when we want to handle bigger tablets */
  @include media-breakpoint-only(md)
    #test
      color: black
  
  @include media-breakpoint-up(xl)
    #test
      color: purple

• 對應之 css 輸出：

  /* css properties of mobile */
  #test {
    color: red;
  }
  
  /* NOT A DEFAULT QUERY, add when we want to handle landscapes */
  @media (min-width: 576px) and (max-width: 767.98px) {
    #test {
      color: green;
    }
  }
  
  @media (min-width: 768px) {
    #test {
      color: blue;
    }
  }
  
  /* NOT A DEFAULT QUERY, add when we want to handle bigger tablets */
  @media (min-width: 768px) and (max-width: 1199.98px) {
    #test {
      color: black;
    }
  }
  
  @media (min-width: 1200px) {
    #test {
      color: purple;
    }
  }

不要在最上層使用 @media，改使用 Sass 支持的選擇器內 @media，以便理解與修改：

// bad
.block1
  color: #fff
.block2
  max-width: 320px
@include media-breakpoint-up(md)
  .block1
    color: #000
  .block2
    max-width: 800px

// good
.block1
  color: #fff
  @include media-breakpoint-up(md)
    color: #000
.block2
  max-width: 320px
  @include media-breakpoint-up(md)
    max-width: 800px

git

flow

• master branch + dev branch
• PR 發在 dev branch

message convention

WIP

component design

• 應避免直接在 component 中設定 margin，參考文章。

  // Foo.vue
  <template>
    <div class="foo" />
  </template>
  
  <style scoped>
  .foo {
    /* margin: 10px; *//* BAD */
  }
  </style>

  // Bar.vue
  <template>
    <div class="bar">
      <Foo class="bar__foo" />
    </div>
  </template>
  
  <script>
  import Foo from './Foo.vue'
  export default {
    components: {
      Foo
    }
  }
  </script>
  
  <style scoped>
  .bar__foo {
    margin: 10px; /* GOOD */
  }
  </style>

Tests

檔案擺放方式

WIP