# **Tài liệu hướng dẫn triển khai UX/UI**

[ ] 3. Hình ảnh, table, video sẽ là figure
- Thiếu đoạn về youtube (đã bổ sung)
[ ] 4. Cách dùng biến ::root trong CSS
- em có bổ sung phần biến cục bộ của root
[ ] 5. Tổ chức file css sẽ theo định hướng module

## **1. Công thức đặt tên class theo chuẩn BEM**

**Parent__Child--Modifier**

<div class="block">
    <div class="block__element block--modifier">
        <img class="block__element-img">
    </div>
</div>

**Trình bày trong CSS**

// block là thành phần đóng vai trò Module
.block{} 
.block .block__element{}
.block .block__element--modifier{}
.block .block__element .block__element-img{}

## **2. Quy định đặt tên theo module**

dành cho header:

<header class="site__header">
    <div class="header__logo">
        <a href="."><img src="logo.svg" alt="aa" /></a>
    </div>
    <nav class="header__nav">
        <ul class="nav nav--header">
            <li><a href="">Trang chủ</a></li>
            <li><a href="san-pham">Sản phẩm</a></li>
        </ul>
    </nav>
</header>

dành cho banner:

<banner class="mod mod__banner">
    <div class="mod__content">
        <div class="banner">
            <h2 class="banner__title"> Lorem ipsum dolor sit amet</h2>
            <span class="banner__description">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </span>
            <button type="button" class="banner__btn btn--cta">Click Me!</button>
        </div>
    </div>
</banner>

dành cho các khối (product):

<div class="product">
    <figure class="product__figure">
        <img class="anh" src=".">
        <div class="product__wrapper">
            <h3 class="product__title text-uppercase product__title--color">Title product</h3>
            <span class="product-cta product--red-color">Add</span>
        </div>
    </figure>
</div>

## **3. Hình ảnh và table, video sẽ được bọc bởi thẻ Figure**

<figure>
    <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
    <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

<figure>
    <video width="320" height="240" controls>
        <source src="movie.mp4" type="video/mp4">
        <source src="movie.ogg" type="video/ogg">
        Your browser does not support the video tag.
    </video>
</figure>

<figure>
    <iframe width="420" height="345" src="https://www.youtube.com/embed/tgbNymZ7vqY?controls=0">
    </iframe>
</figure>

<figure>
    <table>
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>
</figure>

## 4. Sử dụng biến ::root
Ví dụ: Khi khai báo ở đầu file CSS.

:root {
  --border-mod-width: 1px;
  --main-color: green;
}

Thì chúng ta có thể sử dụng như sau

.mod__beseller {
    border: 1px solid var(--border--mod-width);
}

Vậy lợi ích của việc này là gì?

Là ở mỗi dự án khác nhau, người dùng có thể chỉ cần khai báo lại tham số được nêu trong `::root` thì không phải làm gì nhiều về mặt UI nữa.

**Biến toàn cục và biến cục bộ với :root**
Như ở đoạn code khai báo root ở phía trên, phạm vi sử dụng của các biến là toàn bộ dự án nhưng bạn có thể tái định nghĩa biến trong các thành phần cục bộ

:root {
  --red: red;
}
.first-box {
  background-color: var(--red);
}

.second-box {
  /* dùng biến --red ở bên trong để ghi đè ở :root*/
  --red: pink;
  background-color: var(--red);
}

Biến CSS còn hỗ trợ responsive

:root {
  --big-title-size: 50px;
  --text-size: 16px;
  --link-size: 14px;
}
@media only screen and (max-width: 767px) {
  :root {
    --big-title-size: 30px;
    --text-size: 15px;
    --link-size: 13px;
  }
}

Đa số các trình duyệt hiện đại đã hỗ trợ biến CSS nhưng các trình duyệt như IE và Operamini thì chưa nên hãy xác định dự án có cần hiển thị trên các trình duyệt này không nhé

## **5. Tổ chức file CSS theo hướng Module**

Do việc triển khai dự án khác nhau sẽ có nhu cầu sử dụng các mô đun khác nhau nên việc tách vùng CSS sẽ tạo điều kiện để lập trình viên có thể giảm dung lượng file CSS.

Có 2 loại tổ chức CSS.
### 1. CSS trong 1 file chung và đánh dấu điểm bắt đầu của mô-đun và điểm kết thúc của mô-đun. Ví dụ:

/* Start besseller */
.mod__beseller {
    border: 1px solid var(--border--mod-width);
}
/* End besseller */

<div class="mod mod__beseller">
    <div class="mod__title">
        Sản phẩm bán chạy
    </div>
    <div class="mod__content">
        <div class="product-grid product-grid__vertical">
            <div class="product">
                <figure class="product__thumb product__thumb--small">
                    <a href="#"><img class="thumb--img" alt="sản phẩm 1" /></a>
                </figure>
                <h3 class="product__title"><a href="#">Sản phẩm 1</a></h3>
                <div class="product__price">900.000 <span class="product__currency">VND</span></div>
            </div>
            <div class="product">
                <figure class="product__thumb product__thumb--small">
                    <a href="#"><img class="thumb--img" alt="sản phẩm 1" /></a>
                </figure>
                <h3 class="product__title"><a href="#">Sản phẩm 1</a></h3>
                <div class="product__price">900.000 <span class="product__currency">VND</span></div>
            </div>
        </div>
    </div>
</div>

### 2. CSS theo từng file
thông thường sẽ được gắn với các nghiệp vụ. Ví dụ, phần tuyển dụng tách thành job.css. Phần document tách thành doc.css

ví dụ chia folder css theo module

|- assets/
|- css/
| - simple_grid.css
| - menu.css
| - cart.css
| - slide.css
| - product.css

## 6. Simple Grid
Simple Grid là hệ thống css selector được xây dựng bởi các lập trình viên của OSD.VN, giúp xây dựng và quản lý giao diện dự án dễ dàng hơn.

các selector trong Simpple Grid chủ yếu là:
1. quản lý layout
2. quản lý content

Chú ý đọc kĩ file Simple Grid để tận dụng tối đa hệ thống grid, hạn chế custom lại các class đã được định nghĩa.
Tải folder cấu trúc dự án : [download](https://)