# Front-end Coding Guide

## Yêu cầu kiến thức
+ HTML, HTML5 (BEM)
+ CSS, CSS3, SASS
+ JS, JQUERY

## Phần mềm
+ Visual Studio Code (extension: BEM Helper, Live Server, Live Sass Complier)

## Nội dung
### Break point
+ 768px
+ 320px

### HTML
+ Thụt lề đúng thứ tự.
+ Không mix tab và space để thụt lề.
+ Xoá khoảng trắng cuối cùng nếu không sử dụng.
+ Luôn comment sau một Block ví dụ `<!-- end card -->`.
+ Thẻ `img` luôn phải có `alt`
+ Đặt tên class dễ hiểu tới chức năng.

### CSS
+ Luôn sử dụng chữ viết thường, không được viết hoa.
+ Không CSS bằng ID, ID chỉ sử dụng cho JS.
+ Không sử dụng `!important`
+ Thụt lề đúng thứ tự.

Tham khảo thêm tại: https://google.github.io/styleguide/htmlcssguide.html

### SASS
**Alias BEM**
Sử dụng MIXIN bên dưới để kết hợp với BEM nhanh hơn

/// @alias element
@mixin e($element) {
    &__#{$element} {
        @content;
    }
}
/// @alias modifier
@mixin m($modifier) {
    &--#{$modifier} {
        @content;
    }
}

Cách dùng

.menu {
    ...

    @include e('item') {
        ...
    }

    @include m('fixed') {
        ...
    }
}

Kết quả

.menu { ... }
.menu__item { ... }
.menu--fixed { ... }

**Reponsive**
Sử dụng MIXIN bên dưới để reponsive

$breakpoints: (
  'pc': 'screen and (min-width: 769px)',
  'sp': 'screen and (min-width: 321px)'
) !default;

@mixin mq($breakpoint: pc) {
  @media #{map-get($breakpoints, $breakpoint)} {
    @content;
  }
}

Cách dùng
+ Reponsive được sử dụng lồng ngay bên trong, không được viết riêng ra bên ngoài.

.card {
  // màu nền mặc định, trong trường hợp này là màn hình từ 320px trở xuống
  background-color: red;
    
  // màu nền cho màn hình từ 321px đến 768px
  @include mq(sp) {
    background-color: blue;
  }
    
  // màu nền cho màn hình lớn hơn 769px
  @include mq(pc) {
    background-color: green;
  }
}

### BEM

BEM là gì xem: [tại đây](http://getbem.com/introduction/)

Quy ước đặt tên

.block {}   /* Block */
.block__element {}  /* Element */
.block--modifier {}  /* Modifier */

Đối với các element có trạng thái ta đặt tên class có chữ đầu là ```is- has-```
Ví dụ

.is-visible 
.has-loaded

Mẫu BEM

<div class="card">
    <img class="card__image">
    <h2 class="card__title">I am a card</h2>
    <p class="card__description">I am the card paragraph</p>
    <a class="btn btn--green">Learn more</a>
</div> 
<!-- end card -->

Quy ước khi làm việc với BEM
+ Khi bắt đầu 1 porject chúng ta cần xem rõ guide và style những component dùng chung để có thể tái sử dụng được và tồn tại độc lập với các component khác. Chúng ta hãy xem các component của Bootstrap một ví dụ tốt về component.
+ Không được đặt một class con như sau: ```.block__parent__eye``` hoặc ```.btn--green--red```.

### GIT
+ Luôn checkout từ nhánh `develop` để tạo nhánh mới, nhánh sẽ có tên `feature/xxx` xxx tuỳ theo dự án mà sẽ khác nhau.
+ Nếu nhánh mới nhất chưa được merge vào develop thì checkout từ nhánh `feature/xxx` mới nhất đó để làm tiếp.
+ Sau khi làm xong thì tạo Merge Request cho quản lý dự án review.