# HTML/CSS Basic Note

## Các lưu ý cơ bản

{% tabs %}
{% tab title="Naming" %}

#### Cách đặt tên class cơ bản

Đặt class đúng rule google hoặc bem name

* Rule google: 2 từ nối với nhau bằng dấu gạch ngang, không viết hoa, số 1->9 thì thêm 0 vào. Ví dụ: contact contact-item contact-item-01
* Rule bem name:<http://getbem.com/naming/>
* Trường hợp chữ số và 2 chữ cái vẫn theo rule google trên. Vd: product\_\_search-screen + **Ý kiến cá nhân**: trường hợp sử dụng bem name quá dài, từ 3 cấp trở lên, ví dụ contact contact\_\_item contact\_\_item\_\_thumbnail contact\_\_item\_\_thumbnail\_\_detail  Thì cắt đi chữ đầu để rút gọn => contact contact\_\_item item\_\_thumbnail item\_\_thumbnail\_\_detail  hoặc contact item item\_\_thumbnail item\_\_thumbnail\_\_detail
* Không đặt class với dạng mt-5 mb-10 pd-10.... tương ứng với padding, margin để style một cách nhanh gọn. Nguyên nhân là sẽ ảnh hưởng tới responsive, hoặc khách hàng thay đổi hàng loạt về margin trong design
* Khi style thẻ img, tuyệt đối ko set là width và height. Hoặc width hoặc height, nếu ko sẽ bị sai tỉ lệ ảnh
* Biết được cấp độ tag của html

```html
tức là ko đc viết 
<p> <h2></h2> </p> 
hoặc 
<span> <p></p> </span>
```

* Trong trường hợp sử dụng một style css hoặc tag html không phổ biến lắm, phải research xem loại style/tag đó có hoạt động được trên các trình duyệt khác hay ko (chrome, firefox, safari, edge)
* Không sử dụng màu css dạng CHỮ. Vd: `color: blue;` mà phải dùng mã hex hoặc rgba. Nguyên nhân là mỗi trình duyệt sẽ ra 1 dạng màu blue riêng
* Nếu web ko import sẵn bootstrap thì bắt buộc phải define cái dòng này vào css

```css
* {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
```

* Riêng đối với slider hình hoặc product background/thumbnail mà dùng background img thì nên để background img trong inline style luôn vì về sau thì đây thường dễ là dạng data động
* Hình ảnh lưu về nhớ đổi tên là ko có chứa kí tự đặc biệt, ko chứa tiếng nhật hàn trung việt gì hết, space cũng ko đc Vì import vào nó hay bị reformat như thế này heart-empty%20copy.png Nhiều trình duyệt nó ko đọc đc kí tự đặc biệt nó sẽ ko load được hình Bất đắc dĩ nếu hình lấy từ api về có dạng đó thì mới kệ thôi
  {% endtab %}

{% tab title="Format code" %}

#### Về vấn đề format code, khi join dự án phải hỏi code indent là 4 4 8 hay là 2 2 4 Hiện tại đối với team FE thì 2 2 4

<div align="left"><figure><img src="https://447998384-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MfXAtAqYcR4es2ORuPC%2Fuploads%2FEFvpm51pC98fzxEdHeJ0%2FScreen_Shot_2021-06-16_at_2.48.32_PM.png?alt=media&#x26;token=b9e2d6a0-e396-4f28-9ba6-08221dd99352" alt=""><figcaption></figcaption></figure></div>

* Thứ tự import js, css rất quan trọng Customize css của mình luôn phải import cuối cùng Cuối cùng tức là import plugin, framework hết rồi mới import css của mình chứ ko phải import ở cuối trang css đầu trang, js cuối trang
* Phải biết comment code cả html, css, js. Để những người làm việc chung với mình có thể hiểu mình đang viết gì. Comment code càng nhiều càng tốt
  {% endtab %}
  {% endtabs %}

## <mark style="color:red;">Những điều tối kị</mark>

* Tuyệt đối không sử dụng z-index kiểu 99 999 9999 99999999
* Chỉ sử dụng !important trong css khi cần re-style lại inline-style đã có trước đó (từ khách) hoặc plugin

## Những lưu ý trước khi join dự án

* Rule git. Tùy vào yêu cầu của từng dự án/khách hàng sẽ có rule khác nhau, nên hỏi leader trước khi bắt đầu code. Nếu không có yêu cầu gì thì follow theo<https://gumiviet.github.io/#/>
* Phải confirm là cần support trên browser nào, khi làm hoàn thiện phải test hết các trình duyệt và device khách yêu cầu, đừng quá chăm chú vào chrome
* Hỏi về font, font khách gửi, hay font google, remind về việc bản quyền font
* có design mobile hay không, nếu có design riêng thì khi nào gửi, trường hợp khách đưa pc kêu làm pc trước thì phải remind chuyện estimate vì đôi khi nhận design mobile xong là cấu trúc html pc đi bụi luôn
* Môi trường dev được gọi là môi trường hoàn hảo, nên khi deploy lên staging và production sẽ vẫn có trường hợp lỗi ko đoán biết được