DEV Community

Nguyen Thien Ly
Nguyen Thien Ly

Posted on

Create CV with BEM - 2

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)
  2. Phần 2: Thiết kế, lắp ráp index-page và deploy lên github-page (Link)
  3. Phần 3: Refactor code và các chú ý về BEM
  4. 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

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

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

   <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

   <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,

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

   <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

   <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 để đọ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

   <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

   <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)

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
  • Cuộn xuống phần github pages và select phần Master branch
  • Đợi github load lại và cuộn dưới phần đó sẽ thấy link

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:

Top comments (1)

Collapse
 
lelouchlamperouge18 profile image
Lelouch Lamperouge

Hay quá ạ. Hóng phần tiếp theo của a. Cảm ơn a.