> For the complete documentation index, see [llms.txt](https://learncss.gitbook.io/cssadvand/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://learncss.gitbook.io/cssadvand/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-24.md).
# Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 24)
https\://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-24-Az45bz3Q5xY
## Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết (Phần 24)
Bài đăng này đã không được cập nhật trong 4 năm
Hello xin chào mọi người, mình đã trở lại và tiếp tục với phần 24 của series về [Một vài thủ thuật CSS mà chính Frontend có thể còn chưa biết](https://viblo.asia/s/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-bq5QL7RJlD8)
Bắt đầu thôi nào!
#### 1. Bạn có biết System Font Stack?
Với sự phát triển của Web Fonts ngày nay, website của bạn luôn dễ dàng sở hữu được những kiểu chữ đẹp và bất cứ user nào sử dụng cũng đều có được cùng kiểu chữ đó, dù cho người dùng đang sử dụng bất kỳ hệ điều hành nào đi chăng nữa.
Bạn có thể sử dụng các kỹ thuật phổ biến như `@font-face` hay là `Google Fonts API`.
Tuy nhiên, cách sử dụng font như trên cũng mang đến vài nhược điểm như:
1. Không phải đối tượng người dùng nào cũng thích font chữ mà bạn đang sử dụng, chắc chắn sẽ có người khen, kẻ chê.
2. Fonts được coi là 1 thứ resource điển hình của nặng/lớn, so với những resource khác đang được load trên website của bạn.
Nếu chúng ta sử dụng font có sẵn trên máy của người dùng, thì sẽ loại bỏ được bước fetch resource về, thời gian tải trang sẽ nhanh hơn rất nhiều.
Và `System Font Stack` xuất hiện, nó sẽ khắc phục được các nhược điểm trên giúp bạn!
`Github`, `Bootstrap`, `Wordpress` là những website lớn đang sử dụng phương pháp tiếp cận font như trên.
Bạn sẽ thấy đa số dòng code `font-family` đều có những điểm chung như này:
```css
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}
```
Với đoạn code trên, website của bạn trên từng hệ điều hành (HĐH) khác nhau, sẽ có `font-family` khác nhau.
* `-apple-system, BlinkMacSystemFont:` đây là font dành cho HĐH MacOS và ứng với từng phiên bản nó sẽ có tên font khác nhau. Ví dụ như version `El Capitan` thì System Font là `San Francisco`, version `Yosemite` thì System Font là `Helvetica Neue`.
* `"Segoe UI"`: đây là font dành cho HĐH Windows, Windows Phone.
* `Oxygen-Sans, Ubuntu`: là font dành cho HĐH Linux.
* `Roboto`: là font dành cho HĐH Android.
[Xem thêm mô tả HĐH và Browsers tương ứng với tên font được gọi](https://gist.github.com/nagelflorian/9dba284f8348358d9c0d8979aa296671)
> Vấn đề bây giờ là bạn thương lượng với ông Designer và bác khách hàng nữa thôi !!!
**Đọc hiểu thêm**
*
*
*
#### 2. `line-height` phải dùng `unitless`
Đây là vấn đề mình mắc phải trong suốt thời gian dài làm việc với CSS, đó là sử dụng thuộc tính `line-height` với value dạng `px`.
> Lí do mình làm vậy là vì để đúng với Design nhất có thể !!!
Các công cụ hỗ trợ developer `Inspect` Design như `Figma`, `Invision`, `Zeplin` đều cho output code CSS có `line-height: ..px`. Rồi bạn đem nó vào trong code CSS của mình, cứ mỗi dòng text bạn đều liên tục khai báo `font-size` + `line-height` đi kèm. Đây thực sự là một việc khá dư thừa và không cần thiết.
Bạn có 1 tiêu đề khai báo `font-size: 24px`, `line-height: 48px`. Tức ở đây `line-height` gấp đôi giá trị của `font-size`.
Khi làm responsive cho màn hình < 768px, bạn chỉnh lại `font-size: 18px` và `line-height: 36px`. Bạn không làm sai, nhưng bạn đang làm 1 việc không cần thiết.
Thay vì bạn phải viết:
```css
.text {
font-size: 24px;
line-height: 48px;
@media (max-width: 768px) {
font-size: 18px;
line-height: 36px;
}
}
```
Chỉ cần viết lại như này:
```css
.text {
font-size: 24px;
line-height: 2;
@media (max-width: 768px) {
font-size: 18px;
}
}
```
Khi sử dụng `line-height: 2`, trình duyệt sẽ tự động hiểu `line-height` có giá trị bằng gấp đôi `font-size` hiện tại.
Tránh lặp lại việc xử lý như trên, bạn đã bỏ đi được 1 mớ thuộc tính `line-height` thừa rồi chứ???
Nếu bạn đang sử dụng **Bootstrap** thì hãy để ý khai báo `line-height: 1.5` ở thẻ `body`
Hay là xem **Twitter** đang dùng `line-height` như thế nào?
Bạn thấy rồi đó..họ đã sử dụng `unitless` hết rồi.
Tóm lại cách sử dụng `line-height` tốt nhất sẽ là:
1. Khai báo `line-height` sử dụng `unitless` ở thẻ `body`. Các thẻ ở trong thừa kế được `line-height` mà không nhất thiết phải khai báo thêm.
2. Nếu trường hợp cần phải set lại `line-height` cho thành phần cụ thể bên trong thì vẫn ưu tiên sử dụng `unitless`.
3. Nếu lấy `line-height` ở design ra bằng đơn vị `px` thì convert nó ra `unitless` bằng cách `line-height/font-size`.
4. Nếu đang dùng SASS thì tiện ích hơn nữa, bạn có thể sử dụng phép tính trực tiếp trong code SASS `line-height: (32px/16px)` -> CSS: `line-height: 2`.
**Đọc hiểu thêm**
*
*
*
#### 3. Thêm `linter` bắt lỗi thẻ `` không hợp lệ
Ở [tip số 1 của phần 20](https://viblo.asia/p/mot-vai-thu-thuat-css-ma-chinh-frontend-co-the-con-chua-biet-phan-20-4dbZN1WnKYM#_1-highlight-nhung-the-img--thieu-thuoc-tinh-alt-0) mình đã có 1 chia sẻ về cách **Highlight những thẻ \![]()
thiếu thuộc tính alt**. Nay tiếp tục bổ sung cho bộ **linter** là đi kiểm tra những thẻ `` mà:
* Thiếu thuộc tính `href`
* Thuộc tính `href=""`
* Hoặc là thuộc tính `href="#"`
Tất cả đều phải được nổi bật lên trên trang và dev chúng ta phải chú ý để fix nó sớm nhất có thể.
```scss
a {
&[href=""],
&[href="#"],
&[href^="javascript:"],
&:not([href]) {
outline: 2px dotted red;
}
}
```
## Tổng kết
Hi vọng mọi người sẽ tăng thêm skill CSS với 3 tips trên.
Nếu thấy thích thì Upvote, thấy hay thì Clip bài này của mình nhé! ^^
P/s: Tiêu đề câu view thôi nhé! Anh em Frontend pro rồi đừng chém em ạ!