Create CV with BEM - 2
Tags: html, github, css, deploy
Published: 2020-04-02 08:44:21

### Series về cách tạo một CV đơn giản nhưng cực chất cho dev cực chất
1. Phần 1: Chuẩn bị và cấu trúc project **html, css, js** cùng **BEM** thần thánh ([Link](https://dev.to/nguyenthienly/create-cv-with-bem-4io1))
2. Phần 2: Thiết kế, lắp ráp **index-page** và deploy lên **github-page** ([Link](https://dev.to/nguyenthienly/create-cv-with-bem-2-29m7))
3. Phần 3:  Refactor code và các chú ý về **BEM**
3. Phần 4:  Thiết kế và fetch Gist, lắp ráp **blog-page** và deploy lên **github-page**


### Kết quả: **https://nguyenthienly.github.io/MY_PROFILE**
# 2. Phần 2: Thiết kế, lắp ráp **index-page** và deploy lên **github-page**

## Mục lục

0. Cài đặt live-server
1. Thêm một **fonts** bằng **fonts.google.com** và một số thứ khác
2. Cài đặt **block header** và các sai lầm dễ mắc phải về BEM
3. Deploy lên **github-page**
4. Kết bài

## 0. Cài đặt live-server

**_Heyzo what's up_**

Thông thường thì mọi người code **html, csss**, mỗi khi thêm một ít code mới lại **refresh** khá mất thời gian vì vậy mình sẽ giới thiệu một **extension** của **VScode**, để làm điều này tự động

Các bước cài đặt

- Ấn tổ hợp phím (Ctrl + Shift + X)
- Gõ lên thanh tìm kiếm **live server** và ấn vào **install**
- Sau khi cài đặt xong thì, ấn tổ hợp phím (Ctrl + Shift + E) chọn file **.html** kích chuột phải
  trong **Open with live server** nha

## 1. Thêm một **fonts** bằng **fonts.google.com**

Để cài các **font** phù hợp và đẹp mắt thì mình sẽ chỉ cho các bạn một trang rất hay của anh **google**
nha, mình sẽ lấy font chữ để phục vụ cho project mình hôm nay luôn

- vào trang **fonts.google.com**
- Tìm font **fira code** và chọn
- Mình lấy các **options** và sẽ được một **embed** như vầy

```html
<link
  href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;515;600;700&display=swap"
  rel="stylesheet"
/>
```

Lúc khai báo thì mình sẽ sài như dưới đây

```css
font-family: "Fira Code", monospace;
```

Trong bài mình dùng các **icon** của **fontawesome.com** vì vậy các bạn cũng có thể chọn như mình

Về hình ảnh thì có vài cách:

1. Các bạn bỏ vào thư mục **images** và push lên **github** để lấy url

2. Dùng một url có sẵn để dev nha mình xài thằng này **picsum.photos** 

## 3. Cài đặt mẫu **block header** và các sai lầm dễ mắc phải về BEM

Sau khi đã phân chia thư mục như phần trước

```
└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     └─── component
│            └─── button.css
└─── js
│     └─── page
│     └─── container
│     └─── component
└─── index.html
└─── blog.html
```

Ở file **index.html** có bạn nào sẽ khai báo **Block header** như dưới đây không?

**index.html**

``` html
   <header class="header">
        <a class="header__link">
            <img class="header__link__logo">
        </a>

        <ol class="header__list">
            <li class="header__list__item">
              <a class="header__list__item__link">
              </a>
            </li>
        </ol>
    </header>
```

Nếu bạn đã nghĩ khai báo như vậy là đúng, xin chúc mừng bạn đã hiểu nhầm về **BEM** rồi đấy

Bạn nên khai báo file **index.html** như dưới này:

**index.html**
``` html
   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>
    </header>
```
> tại sao như vậy?

### Nguyên tắc 1

Khi làm **BEM** thì nên tuân thủ **Block__Element** chứ không phải **Block__Element__Element**. Vì **BEM** không thể hiện các level hoặc độ sâu của các element, mà **BEM** giúp bạn dễ dàng định danh mối quan hệ với **top-level block** (Block mà nó nằm trong). Nên các bạn hãy cố gắng đặt đúng nguyên tắc **BEM** nha

> Tiếp theo,

[<img src="https://i.imgur.com/Sg0bW09.png">](header)

Trong **Block Header** này có 3 Element gồm:

- **Logo** bên trái
- **Menu** ở giữa
- **button** bên phải

Ở bài trước mình đã tách **Button** ra một block riêng, sẽ có **Block chứa Block khác**, ví dụ dưới đây

**index.html**
``` html
   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn">My blog</a>
    </header>
```

Vậy bây giờ các bạn sẽ gặp trường hợp. Là thằng **Block cha (header)** muốn điều khiển thằng **Block con (btn)**

Vậy bạn sẽ khai báo như nào, có bạn nào định làm như dưới đây không?

**index.html**
``` html
   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="header__btn btn">My blog</a>
    </header>
```

Như các bạn thấy mình vừa thêm class `header__btn` vào, nếu các bạn nghĩ như này là đúng thì hình như lại hiểu nhầm **BEM** nữa rồi ^^

### Nguyên tắc 2 

Chúng ta không nên cho một **Block** này can thiệp vào một **Block** khác. Điều này vô tình có khiến bạn đang sửa đổi một hoặc thuộc tính của thằng **Block** bị can thiệp đang có nhé. Điều này cũng đã vi phạm nguyên tắc **Open/Close** của **SOLID** 
> Ai không biết thì kích vào [đây](https://itnext.io/solid-principles-explanation-and-examples-715b975dcad4) để đọc thêm về nó nhá

Vậy chúng ta phải làm sao để có thể giải quyết vấn đề trên?

Đây là lúc dùng thằng **Modifier** này nha, ví dụ dưới trong file **index.html**

**index.html**
``` html
   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn--mt-50 btn">My blog</a>
    </header>
```

Mình có thay thằng `header__btn` bằng thằng `btn--mt-50` để ví dụ rằng mình muốn trong **Block header** này **Block btn** sẽ **margin-top: 50px**. Sẽ có cách giải quyết hay hơn nhưng mình sẽ trình bày ở **Phần 3 nhé**


> Cuối cùng

Ở **Phần 1** mình đã cũng nói lí do là muốn tách **Block btn** ra riêng vì trong **project** có dùng lại.

Mình giả sử nếu bạn không tách ra, mà xem **Block btn** như một **Element btn của Block header** và sau đó lại có một nơi nào đó sài một **btn khá giống với cái element btn trong Block header** thì phải code lại hay tạo ra **block btn mới** phải không nào, điều này cũng vi phạm nguyên tác về **BEM**

### Nguyên tắc 3
Khi nào mà vẫn có thể **Modifier** được thì ưu tiên **Modifier** hơn là tạo ra một **Block** mới

Vậy cũng là ví dụ này, khi mình muốn trong **Block Header** cái **Block btn** nhỏ hơn những cái khác thì mình thêm class **btn--small** là được

**index.html**
``` html
   <header class="header">
        <a class="header__link">
            <img class="header__logo">
        </a>

        <ol class="header__list">
            <li class="header__item">
              <a class="header__link">
              </a>
            </li>
        </ol>

         <a href="#" class="btn btn--mt-50 btn--small">My blog</a>
    </header>
```


Và kết quả sẽ được như hình nhá (Mình chỉ dựa theo thôi và trình mình không thể clone giống bạn này 100% các bạn thông cảm)

[<img src="https://i.imgur.com/qbl5sUO.png">](my-header)


Trên đây là các kinh nghiệm mà mình đã có khi làm việc với **BEM** mình hy vọng các bạn có thể thực hành và hiểu hơn về BEM nhé

### Nếu không có người yêu khiến bạn buồn, thì BEM sẽ khiến bạn hanh phúc, hãy tin là như vậy

## 4. Deploy lên github-page


Sau một hồi code và refactor code thì cơ bản cũng đã xong trang **index.html** với cấu trúc thư mục như sau

```
└─── images
└─── css
│     └─── page
│     │      └─── index.css
│     │      └─── blog.css
│     └─── container
│     │      └─── header.css
│     │      └─── ...
│     └─── component
│            └─── button.css
│            └─── ...
└─── js
│     └─── page
│     └─── container
│     └─── component
│            └─── ...
└─── index.html
└─── blog.html
```

Chú ý giúp mình đặt tên có **index.html** và bố trí như trên để push lên **github** nhận luôn nhá

Các bạn gõ các lệnh sau 

```
git add .
git commit -m "create home.html"
git push origin master
``` 

Sau đó lên trang github làm theo các bước sau 
- Kích vào phần setting 
[<img src="https://i.imgur.com/1wJcKeT.png">](setting-github)
- Cuộn xuống phần **github pages** và select phần **Master branch**
[<img src="https://i.imgur.com/UdJdcDv.png">](setting-github) 
- Đợi **github** load lại và cuộn dưới phần đó sẽ thấy link
[<img src="https://i.imgur.com/qnhapSu.png">](setting-github) 

### Kết quả **https://nguyenthienly.github.io/MY_PROFILE**

## 4. Kết bài

Đến đây cũng đã hết phần này rồi, các bạn nếu thấy thú vị và hữu ích thì tiếp tục theo dõi, mình sẽ có phần 3 sớm nhất có thể

Chúc mọi người vượt qua mùa dịch an toàn, và làm những điều thật có ít nhé

> Mày không thoát được đâu con trai, tu be không tình yêu

#### Link tham khảo:
- shorturl.at/nsvN0
- shorturl.at/fqsRT
- http://getbem.com/