1. position: sticky hoạt động như thế nào?

Một element có position: sticky sẽ:

1. Hoạt động như position: relative cho đến khi
2. Một cạnh (top / bottom / left / right) chạm tới offset đã chỉ định trong vùng scroll
3. Sau đó nó sẽ “dính” (stick) tại vị trí đó

📌 Quan trọng: Sticky luôn bị giới hạn trong phạm vi của parent (không vượt ra ngoài).

Ví dụ minh họa

.header {
  position: sticky;
  top: 0;
  background: white;
  z-index: 10;
}

Header này sẽ cuộn bình thường cho đến khi cạnh trên chạm vị trí 0px từ đỉnh viewport, sau đó sẽ “dính” lại ở đó khi bạn tiếp tục cuộn xuống.

2. Điều kiện bắt buộc để sticky hoạt động

2.1. Phải có ít nhất một offset

❌ Sai:

.sticky {
  position: sticky;
}

✅ Đúng:

.sticky {
  position: sticky;
  top: 0;
}

Tailwind CSS:

<div class="sticky top-0">...</div>

2.2. Parent không được có overflow: hidden | auto | scroll

Nếu bất kỳ cha nào có overflow khác visible → sticky bị vô hiệu hóa.

❌ Sai:

.parent {
  overflow: hidden;
}

✅ Fix:

• Xoá overflow
• Hoặc đưa sticky ra ngoài container đó
• Hoặc áp dụng overflow cho một container bên trong

2.3. Parent phải đủ cao để có scroll

Sticky chỉ kích hoạt khi có scroll thật.

❌ Sai:

<div style="height: 100px">
  <div class="sticky">Short parent</div>
</div>

✅ Đúng:

<div style="min-height: 200vh">
  <div class="sticky">Tall parent</div>
</div>

2.4. Parent không được dùng transform

Nếu parent có:

• transform: translateZ(0);
• transform: scale(1);
• hoặc animation/transition với transform

→ sticky không hoạt động.

Giải pháp: Di chuyển transform ra khỏi parent, hoặc áp dụng cho element khác.

2.5. z-index có thể làm bạn tưởng sticky không chạy

Sticky vẫn hoạt động nhưng bị che bởi các element khác.

.sticky {
  position: sticky;
  top: 0;
  z-index: 10;
  background: white; /* Quan trọng để không bị trong suốt */
}

Tailwind CSS:

<div class="sticky top-0 z-10 bg-white">...</div>

3. Vì sao top: 30px không hoạt động nhưng bottom: 30px lại được?

Đây là bẫy rất phổ biến và gây nhầm lẫn nhiều nhất.

Nguyên nhân cốt lõi

Sticky chỉ hoạt động nếu cạnh được chỉ định CÓ KHẢ NĂNG chạm tới offset đó khi scroll.

• top: 30px → cạnh trên phải chạm 30px từ đỉnh vùng scroll
• bottom: 30px → cạnh dưới phải chạm 30px từ đáy vùng scroll

👉 Trong layout của bạn:

• Cạnh trên không bao giờ chạm được 30px → top không hoạt động
• Nhưng cạnh dưới có thể chạm → bottom hoạt động

4. Các tình huống gây ra hiện tượng này

4.1. Element đã nằm sẵn gần top parent

<div class="parent">
  <div class="sticky" style="position: sticky; top: 30px">
    Tôi đã nằm ở đây từ đầu
  </div>
</div>

Phân tích:

• Nếu sticky ban đầu đã nằm ≤ 30px từ top
• top: 30px → không có thời điểm kích hoạt
• Browser coi như position: relative

Trong khi đó:

• Khi scroll, cạnh dưới vẫn có thể chạm đáy viewport
• → bottom hoạt động bình thường

4.2. Parent không đủ cao

Sticky bị giới hạn trong parent.

• Khoảng cách từ sticky → đỉnh parent quá ngắn → top không kích hoạt
• Khoảng cách tới đáy parent vẫn còn → bottom hoạt động

<div style="height: 200px"> <!-- Parent quá ngắn -->
  <div style="position: sticky; top: 30px">
    Không đủ khoảng cách để stick
  </div>
</div>

4.3. Scroll container không phải window

.wrapper {
  height: 100vh;
  overflow-y: auto;
}

top được tính theo .wrapper, không phải theo màn hình.

Nếu sticky đã gần top của wrapper → top không ăn.

5. Minh họa trực quan

top không hoạt động

┌─────────────┐
│  viewport   │
│             │
│   30px ↓    │ ← Mốc sticky mong muốn
│  [sticky]   │ ← Nhưng element đã nằm sẵn ở đây
│   content   │
│      ⋮      │
└─────────────┘

Không có lúc nào cạnh trên chạm mốc 30px → Sticky không kích hoạt

bottom hoạt động

┌─────────────┐
│   content   │
│      ⋮      │
│  [sticky]   │ ← Element bắt đầu ở đây
│             │
│   30px ↑    │ ← Khi scroll, cạnh dưới sẽ chạm mốc này
│  viewport   │
└─────────────┘

Cạnh dưới có lúc chạm 30px → Sticky kích hoạt

6. Cách fix top: 30px không hoạt động

✅ Cách 1: Tạo khoảng cách ban đầu

.sticky {
  margin-top: 40px; /* Đẩy xuống để có khoảng cách */
  position: sticky;
  top: 30px;
}

✅ Cách 2: Đặt sticky thấp hơn trong DOM

<div class="parent">
  <div style="height: 100px"></div> <!-- Spacer -->
  <div class="sticky" style="position: sticky; top: 30px">
    Bây giờ có khoảng cách để stick
  </div>
</div>

✅ Cách 3: Kiểm tra overflow của parent

.parent {
  overflow: visible; /* Hoặc bỏ hoàn toàn */
}

✅ Cách 4: Debug nhanh bằng outline

.sticky {
  position: sticky;
  top: 30px;
  outline: 2px solid red; /* Giúp nhìn rõ khi nào sticky kích hoạt */
}

Khi bạn scroll, nếu outline màu đỏ “dính” lại ở vị trí 30px từ trên xuống, nghĩa là sticky đã hoạt động.

7. Checklist debug sticky (90% fix được vấn đề)

Khi sticky không hoạt động, hãy check theo thứ tự:

• ✔ Có top / bottom / left / right được khai báo?
• ✔ Parent không có overflow: hidden/auto/scroll?
• ✔ Có scroll thật (parent đủ cao)?
• ✔ Parent không dùng transform?
• ✔ Có z-index và background nếu cần?
• ✔ Cạnh được chỉ định có khả năng chạm offset không?

Debug tool nhanh

/* Thêm vào element sticky để debug */
.sticky {
  outline: 3px dashed red;
  outline-offset: -3px;
}

/* Thêm vào parent để kiểm tra */
.parent {
  outline: 2px solid blue;
}

8. Ví dụ thực tế: Sticky header

❌ Không hoạt động

<div style="overflow: hidden"> <!-- Lỗi: overflow -->
  <header style="position: sticky; top: 0">
    Menu
  </header>
  <main>Content...</main>
</div>

✅ Hoạt động đúng

<div> <!-- Không có overflow -->
  <header style="position: sticky; top: 0; z-index: 10; background: white">
    Menu
  </header>
  <main style="min-height: 200vh">
    Content...
  </main>
</div>

Với Tailwind CSS

<div>
  <header class="sticky top-0 z-10 bg-white shadow">
    <nav class="container mx-auto">Menu</nav>
  </header>
  <main class="min-h-[200vh]">
    Content...
  </main>
</div>

9. Ví dụ nâng cao: Sticky sidebar

<div class="flex gap-4">
  <!-- Sidebar sticky -->
  <aside class="w-64">
    <div class="sticky top-4">
      <nav>Navigation links...</nav>
    </div>
  </aside>
  
  <!-- Main content -->
  <main class="flex-1 min-h-[200vh]">
    Long content...
  </main>
</div>

Tailwind CSS:

<div class="flex gap-4">
  <aside class="w-64">
    <div class="sticky top-4">
      <nav>Navigation</nav>
    </div>
  </aside>
  <main class="flex-1 min-h-[200vh]">Content</main>
</div>

10. Lưu ý khi dùng với framework

Nuxt / Vue

<template>
  <div class="container">
    <!-- ❌ Tránh -->
    <div style="overflow-x: hidden">
      <header class="sticky top-0">Header</header>
    </div>
    
    <!-- ✅ Đúng -->
    <header class="sticky top-0 z-10 bg-white">Header</header>
  </div>
</template>

<style scoped>
.container {
  /* Không dùng overflow ở đây */
}
</style>

React / Next.js

export default function Layout({ children }) {
  return (
    <div className="min-h-screen">
      <header className="sticky top-0 z-10 bg-white shadow">
        <nav>Menu</nav>
      </header>
      <main className="container mx-auto">
        {children}
      </main>
    </div>
  )
}

11. Kết luận

position: sticky không hề lỗi, chỉ là nó rất nghiêm ngặt về điều kiện kích hoạt.

Nguyên tắc vàng

“Cạnh này có thực sự chạm được offset đó khi scroll không?”

Nếu top không hoạt động nhưng bottom lại được, 99% là do cạnh trên không bao giờ chạm được offset đã chỉ định.

Lời khuyên cuối

• Nếu bạn đang dùng Nuxt / Tailwind / layout phức tạp, chỉ cần sai 1 class overflow-hidden là sticky hỏng hoàn toàn
• Luôn test sticky với outline hoặc background màu nổi để debug
• Đọc kỹ các điều kiện ở phần 2, đặc biệt là overflow và transform
• Khi gặp lỗi, check lại chiều cao parent và vị trí ban đầu của element

💡 Pro tip: Tạo một component/utility class sticky chuẩn cho project và tái sử dụng, tránh phải debug nhiều lần.

Chúc bạn code vui! 🚀

The post Tại sao position: sticky của bạn không hoạt động ? appeared first on Tomoshare.

I. Tại sao chúng ta cần :where() và :is()?

Trước khi có những pseudo-classes này, để áp dụng kiểu cho nhiều selector, chúng ta thường phải sử dụng một danh sách dài các selector, đôi khi dẫn đến mã CSS dài và khó đọc. Cùng xem xét một ví dụ:

h1, h2, h3, h4, h5, h6 {
  color: blue;
}

Trong trường hợp này, chúng ta muốn áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6. Tuy nhiên, khi cần loại bỏ một số phần tử khỏi danh sách, chúng ta phải lặp lại toàn bộ danh sách và loại bỏ chúng:

h1, h2, h3, h5, h6 {
  color: blue;
}

Với :where() và :is(), chúng ta có cách tiếp cận mới giúp giảm sự lặp lại và làm cho mã CSS trở nên sáng sủa hơn.

II. Sử Dụng :where() và :is()

1. Sử dụng :where()

Cú pháp của :where() rất đơn giản. Nó cho phép bạn nhóm các selector lại một cách hiệu quả mà không cần phải lặp lại toàn bộ danh sách:

:where(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Câu lệnh trên sẽ có kết quả giống như ví dụ đầu tiên, áp dụng màu xanh cho tất cả các phần tử tiêu đề từ h1 đến h6

2. Sử dụng :is()

Tương tự như :where(), :is() cung cấp một cách khác để nhóm các selector:

:is(h1, h2, h3, h4, h5, h6) {
  color: blue;
}

Cả hai cách tiếp cận đều tạo ra kết quả tương tự và giúp bạn làm cho mã CSS ngắn gọn hơn và dễ đọc hơn.

III. Ưu điểm và Lưu ý

1. Ngắn Gọn và Dễ Đọc:

Cả :where() và :is() giúp giảm sự lặp lại trong mã CSS, làm cho nó trở nên ngắn gọn và dễ đọc hơn.

2. Tích hợp Dễ Dàng:

Cả hai pseudo-classes này tích hợp tốt với các selector khác, giúp bạn duy trì tính tương thích và tính linh hoạt trong mã nguồn của mình.

3. Dễ Bảo Trì:

Khi cần thêm hoặc loại bỏ các selector, bạn chỉ cần thực hiện thay đổi ở một địa điểm duy nhất, giúp dễ bảo trì hơn.

4. Trình duyệt hỗ trợ:

:where()

:is()

IV. Kết Luận

Sử dụng :where() và :is() trong CSS selector mang lại những lợi ích đáng kể về sự ngắn gọn và dễ đọc. Đặc biệt, chúng là một công cụ hữu ích khi bạn cần áp dụng kiểu cho nhiều phần tử cùng loại một cách linh hoạt. Hãy tích hợp chúng vào công cụ lập trình CSS của bạn để trải nghiệm sự tiện lợi mà chúng mang lại.

The post Sử dụng :where() và :is() trong CSS Selector – Ngắn gọn và mạnh mẽ appeared first on Tomoshare.

I. Giới Thiệu về :has()

:has() là một pseudo-class mới trong CSS, cho phép bạn chọn các phần tử cha dựa trên nội dung của các phần tử con bên trong chúng. Cú pháp cơ bản như sau:

parent:has(child) {
  /* CSS styles */ 
}

Với :has(), bạn có thể áp dụng kiểu cho các phần tử cha chứa một hoặc nhiều phần tử con cụ thể, làm cho việc chọn lựa và định dạng trang web trở nên linh hoạt hơn.

II. Sử Dụng Cú Pháp :has()

1. Chọn Parent Có Phần Tử Con Cụ Thể

div:has(p) {
  background-color: #f0f0f0;
}

Trong trường hợp này, tất cả các div chứa ít nhất một phần tử p sẽ có nền màu xám nhạt.

2. Kết Hợp Nhiều Phần Tử Con

article:has(h2, p) {
  border: 1px solid #ccc;
}

Câu lệnh trên sẽ chọn tất cả các phần tử article chứa ít nhất một phần tử h2 hoặc p và áp dụng đường viền xám nhạt.

3. Sử Dụng Nested :has()

section:has(article:has(h2)) {
  margin: 10px;
}

Trong trường hợp này, section sẽ được chọn nếu nó chứa ít nhất một article có chứa ít nhất một phần tử h2.

III. Ưu Điểm và Hạn Chế

1. Ưu Điểm của :has()

• Linh Hoạt: Cho phép bạn chọn các phần tử cha dựa trên nội dung của phần tử con, mang lại sự linh hoạt cao khi định dạng trang web.
• Dễ Đọc: Làm cho mã CSS trở nên rõ ràng hơn, giảm sự phức tạp của selector.

2. Hạn Chế và Lưu ý

• Hạn Chế Sự Linh Hoạt: Mặc dù mạnh mẽ, nhưng :has() có thể hạn chế sự linh hoạt khi so sánh với một số phương pháp khác như JavaScript.
• Hỗ Trợ Trình Duyệt: Hiện tại, :has() chưa được hỗ trợ rộng rãi, vì vậy hãy kiểm tra hỗ trợ trình duyệt trước khi sử dụng.

3. Trình duyệt hỗ trợ

IV. Kết Luận

Pseudo-class :has() mang lại một cách tiếp cận mới và thú vị cho việc chọn các phần tử cha dựa trên nội dung của phần tử con trong CSS. Tuy nhiên, đối với sự hỗ trợ và linh hoạt, cân nhắc kết hợp :has() với các phương pháp khác để đảm bảo tính ổn định và tương thích trình duyệt. Hãy thử nghiệm và tận dụng sức mạnh của :has() để tối ưu hóa mã CSS của bạn.

The post Khám Phá CSS Parent Selector :has() appeared first on Tomoshare.

Basic

CSS không phải nguyên nhân trực tiếp gây ra vấn đề khi load trang web, nhưng bạn vẫn nên tối ưu những phần nặng của dữ liệu mà CSS có thể chứa như: Xử dung CDN, xoá các tệp không xử dụng đến, thay đổi kích thước hình ảnh, xử dụng thumbnail, giảm thiểu số file css nếu có thể,…

Tuân thủ một số quy tắc trong style coding conventions cũng là một điều nên nhớ, dưới đây là một số quy tắc bạn có thể tham khảo:

• Lùi vào 2 space (khoảng trống) cho mỗi thuộc tính
• Sử dụng ngoặc kép thay vì sử dụng ngoặc đơn (font-family: “Arial Black”, input[type=”checkbox”])
• Đặt một dấu cách ở đằng sau dấu :
• Đặt một dấu cách ở trước dấu {
• Kết thúc định nghĩa các thuộc tính bằng một dấu chấm phẩy (mặc dù việc thêm dấu chấm phẩy là không bắt buộc nhé)
• Sử dụng các cú pháp ngắn gọn nếu có thể ví dụ như (padding, margin…)
• Chỉ khai báo mỗi dòng một thuộc tính (dễ nhìn, nếu lỗi có thể biết lỗi được ở dòng nào thuộc tính nào)
• Code thêm những thuộc tính khác mà trình duyệt này hỗ trợ mà trình duyệt khác không hỗ trợ
• Giữa các khối CSS nên có một khoảng trắng
• Khuyến khích sử dụng mã màu (#fff)
• …

CSS Pre-Processors

CSS Pre-Processors là một ngôn ngữ tiền xử lý CSS, các bạn có thể hiểu nó là một kiểu viết mở rộng, nâng cấp hơn so với CSS. Mục đích của CSS Pre-Processors được sinh ra nhằm mục đích đưa các đoạn code CSS trở nên giống hơn một ngôn ngữ lập trình, và cách viết này sẽ biên dịch lại thành các đoạn code CSS bình thường.

Để áp dụng các CSS Pre-Processors vào dự án của bạn thì có vài công cụ nổi tiếng giúp các bạn áp dụng vào dự án như: SCSS, SASS, LESS, Stylus… Trong bài này mình sẽ giới thiệu về SCSS/SASS.

Tất nhiên là phải có những lợi ích nhất định của CSS Pre-Processors thì nó mới được áp dụng vào các dự án như:

• Cải thiện thời gian viết CSS
• Linh hoạt hơn và có khả năng sử dụng lại code
• Dễ dàng bảo trì cũng như là phát triển
• Cấu trúc viết code rõ ràng, dễ nhìn hơn rất nhiền
• Hạn chế được những đoạn code trùng lặp, file code nhỏ gọn.

SASS

SASS là viết tắt của Syntactically Awesome StyleSheets là một CSS Pre-Processors nổi tiếng được biết đến trong giới Front-end Developer. SASS được sinh ra bởi lập trình viên Ruby, nếu như bạn đã làm việc với Ruby thì ắt hẳn sẽ biết tới các template phổ biến như HAML hay SLIM.

Tại sao mà mình lại nhắc đến Ruby, nó liên quan gì đến CSS thì mình xin giải thích đó chính là đến từ cú pháp. Ví dụ như khi viết SLIM các bạn sẽ không cần các dấu đóng thẻ, hay dấu chấm phẩy, hay nhận biết các thẻ con bằng cách lùi dòng vào… Điều này chính là những kiểu viết của SASS.

Ví dụ như thế này

.nav

  width: 100%

  height: 100%

  float: right

  p

    color: #e1e1e1

    font-size: 14px;

SCSS

Một phần không nhỏ developer không thích cách viết của SASS lắm vì nó mang lại cảm giác đọc hơi rối cả khó hiểu, có lẽ chính vì thế nên đã có sự nâng cấp tuyệt vời đến từ SCSS.

SCSS hay còn gọi là Sassy CSS, có cú pháp giống với CSS hơn là SASS giúp chúng ta tiếp cận dễ hơn rất nhiều. Hiểu đơn giản thì SCSS là một phiên bản nâng cấp của SASS.

.nav {

  width: 100%;

  height: 100%;

  float: right;

  p {

    color: #e1e1e1

    font-size: 14px;

  }

}

Sự khác biệt cơ bản của SCSS và SASS

Qua 2 phần giới thiệu ở trên thì phần nào các bạn cũng đã hiểu hiểu SCSS và SASS là gì và cách viết như thế nào. Ở phần này mình xin tóm tắt lại chút sự khác biệt để các bạn có cái nhìn tổng quát hơn.

SASS:

• Cú pháp ngắn gọn hơn
• Sử dụng indent để thể hiện quy tắc xếp chồng (nested rules)
• Khi kết thúc một property thì không cần dấu ; để kết thúc
• Khai báo mixins bằng ký tự =
• Sử dụng mixins bằng ký tự +

SCSS

• Cú pháp gần với CSS hơn
• Sử dụng cặp dấu {} để thể hiện quy tắc xếp chồng
• Kết thúc 1 khai báo property CSS bằng dấu ;
• Khai báo mixins bằng cú pháp @mixins ten-mixins
• Sử dụng mixins bằng cú pháp @include ten-mixins

Sử dụng variables

Bây giờ mình bắt đầu giới thiệu những thứ hay ho để giúp bạn viết CSS chuyên nghiệp hơn, hay ho hơn.

Để bắt đầu thì mình xin giới thiệu về variables. Đến CSS mà còn có cả variables (biến) thì cũng hơi bị thú vị rồi đấy.

Giả sử như dự án của bạn dùng đến cả trăm chỗ có thể sử dụng cùng một giá trị màu chả hạn, đối với các mã màu đơn giản thì các bạn nhớ được thôi chứ ví dụ có những mà màu rắc rối giả sử như DEFQ13 chả hạn, thì nhớ làm sao được, nhà còn bao việc 😄

Để tối ưu hơn trong việc này chúng ta sẽ đặt cái mã màu này trong một biến, giúp chúng ta thuận tiện sử dụng hơn nhiều.

$text-grey: #e1e1e1;

/* Sử dụng */

p {

  color: $text-grey;

}

div.container a {

  color: $text-grey;

}

…

Viết đơn giản không phải cầu kì.

Mixins

Mình từng nói ở trên là CSS Pre-Processors giúp chúng ta có thể tái sử dụng code. Mixins chính là cách để giúp chúng ta có thể làm được việc này một cách đơn giản.

@mixin bordered {

  border: 1px solid #ddd;
  
  &:hover {
  
  border-color: #999;
  
  }

}

/*Sử dụng chỉ cần include mixins đã khai báo*/

div {

    @include bordered;

}

Thậm chí chúng ta có thể truyền cả tham số vào mixins.

@mixin bordered($width) {

  border: $width solid #ddd;
  
  &:hover {
  
    border-color: #999;
    
  }
  
}

/*Sử dụng chỉ cần include mixins đã khai báo*/

div {
  @include bordered(1px);
}

Nested

Khi mà mới học lập trình HTML, CSS thì mình đã từng thế này, và mình nghĩ cũng nhiều bạn đã từng như mình.

<div class="container">

    <ul class="nav">

        <li class="item">

            <a class="item-children">Hello</a>

        </li>

    </ul>

</div>

Xong khi viết CSS sẽ dạng dạng như thế này.

.container {

  width: 100%;

}

.container .nav {

  font-size: 14px;

}

.container .nav .item {

  float: left;

}

.container .nav .item .children {

  texx-decoration: none

}

Nhìn đoạn code trên có khiếp không, lặp đi lặp lại các selector, đó là chỉ với trường hợp mình có 4 item con con bên trong. Chả lẽ giờ có đến chục item con con bên trong các bạn cũng viết kiểu như thế này thì rõ ràng là không hề ổn chút nào. Lúc người khác đọc lại code phải dò dò xem đâu là cha của nó các kiểu con đà điểu thì sẽ rất mất thời gian.

Nếu như ai còn đang viết kiểu như thế mình khuyên nên bỏ đi và áp dụng ngay kiểu nested rules như sau đây.

.container {

    width: 100%;

    .nav {

        font-size: 14px;

        .item {

            float: left;

            .children {

                text-decoration: none;

            }

        }

    }

}

Nhìn trông code có phải gọn gàng, dễ quản lí và chuyên nghiệp hơn chút rồi đấy. Hãy áp dụng nhé các bạn.

Ngoài ra còn rất nhiều các tính năng khác mà các bạn có thể lên trang chủ của nó tìm đọc nếu muốn.

Kĩ thuật OOCSS

OOCSS là viết tắt của Object-Oriented CSS, hướng đối tượng trong CSS. Cụ thể mà tính chất hướng đối tượng này đó là tính kế thừa.

Kĩ thuật này được sinh ra nhằm hạn chế việc trùng lặp code.

Khai báo class bổ trợ.

Nếu bạn nào đã sử dụng Bootstrap thì đây chính là kinh nghiệm khá hay mà chúng ta có thể học hỏi từ Bootstrap.

Viết cs ngắn gọn

<!DOCTYPE html>

<html>

  <head>
  
    <style>
    
    body {
      /* Thay vì viết từng thuộc tính */
    
      font-style: italic;
    
      font-weight: bold;
    
      font-size: .8em;
    
      line-height: 1.2;
    
      font-family: Arial, sans-serif;
    
      background-image: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjnIfv9UzLhhQwAG_0mxil1Z5KyQT7xROTYA&usqp=CAU");
  
      background-repeat: no-repeat;
  
      background-position: center center;
  
      background-attachment: fixed;
    
      background-color: #fff;
      /* thì chúng ta có thể viết gọn lại như sau */
  
      font: italic bold .8em/1.2 Arial, sans-serif;
    
      background: #fff url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjnIfv9UzLhhQwAG_0mxil1Z5KyQT7xROTYA&usqp=CAU") no-repeat fixed center center;
    
    }
    
    h1 {
    
      color: green;
    
      text-align: center;
    
    }
    
    p {
    
      font-family: verdana;
    
      font-size: 20px;
    
      position: fixed;
    
      bottom: 0;
    
      text-align: center;
    
      width: 100%;
    
    }
    
    </style>
  
  </head>

  <body>
  
    <h1>Welcome to</h1>
    
    <p>All Rights Reserved</p>
  
  </body>

</html>

Lưu ý & suy ngẫm

Một selector với trọng số lớn liệu có tốt không?

Ví dụ:

/* Trọng số là 2,3,4 */

#main article.sports table#stats tr:nth-child(even) td:last-child {

  ...

}

Với trọng số là 2,3,4, bạn sẽ rất khó để override nó, và sẽ làm cho code của bạn rối rắm và khó để maintain hay extend.

Bất kì khi nào bạn rơi vào tình huống không hiểu vì sao element của mình lại có style không như mong muốn, thì Specificity sẽ giúp bạn. Tuy nhiên thay vì ngồi đếm trọng số bằng tay, giờ đây với công cụ devtools mạnh mẽ của các browser thì việc xác định lỗi style là vô cùng đơn giản. Tuy nhiên các công cụ này cũng xây dựng trên nguyên lý CSS Specificity mà thôi chứ không có gì khác biệt đâu. Bạn có thể tham khảo hình ảnh bên dưới để hiểu hơn về cách đánh trọng số.

Specificity chỉ có ý nghĩa nếu một element có nhiều selector cùng trỏ (target) đến nó. Nói nôm na là nếu cuộc chiến mà chỉ có 1 người tham gia thì hiển nhiên người đó thắng rồi.

Trong CSS có việc kế thừa style từ các element cha. Tuy nhiên việc kế thừa này sẽ luôn xếp sau những selector trỏ (target) đích danh đến element nhé. Bạn để ý khi sử dụng devtools là thấy thôi.

Việc có nên sử dụng inline styles không vẫn là một vấn đề gây tranh cãi. Một số linter sẽ warning nếu bạn viết inline styles, nhưng bạn vẫn có thể tắt warning đó đi nếu muốn. Một trong những lý do là vì trọng số của nó quá cao sẽ dễ gây ra các lỗi không mong muốn, hoặc sẽ rất khó để override và buộc phải dùng đến !important. Một lý do khác nữa là với nhiều “chuyên gia” thì CSS nên đặt trong các file .css để dễ quản lý, chứ nếu nằm trong style (html) thì rối loạn lên hết?

Mặc dù trùm cuối !important vô cùng mạnh mẽ, việc dùng đến !important không phải là một giải pháp tốt và cần hạn chế sử dụng, giống như inline styles mà mình vừa đề cập đến. Trước khi buộc phải dùng đến !important, bạn hãy suy xét cẩn thận xem chúng ta có thể sử dụng CSS Specificity để đạt được mục đích hay không.

BEM

Đây là một kĩ thuật để đặt tên cho class trong HTML/CSS. Cách đặt tên class với BEM sẽ làm code của chúng ta nhìn rất chuyên nghiệp và có logic hơn rất nhiều.

Việc áp dụng kĩ thuật này vào trong project sẽ giúp chúng ta dễ dàng maintain và phát triển, dễ dàng hơn với những người vào dự án sau này khi đọc lại code.

BEM là viết tắt của Block, Element và Modifier. Nguyên tắc để đặt tên class sẽ dựa trên 3 thành phần kia để chúng ta đặt tên class cho chuẩn chỉ.

Block: Một khối độc lập mang ý nghĩa riêng, mô tả rõ mục đích của nó. (header, container, menu…). Block sẽ chứa những định dạng chung để có thể tái sử dụng.

Element: Là một phần thuộc một khối và thực hiện một chức năng cụ thể, element này sẽ phụ thuộc vào block để đặt tên sao cho phải.

Modifier: Modifier sẽ dùng để thao tác nếu muốn thay đổi cách hiển thị của block hoặc element.

Ở đây mình không phải muốn giải thích hay giới thiệu chi tiết về 2 “phương pháp” này, mà chỉ muốn chỉ ra một vài điểm liên quan với Specificity thôi. Ngoài BEM và ITCSS ra còn có nhiều phương pháp khác nữa, nhưng cơ bản đều xây dựng trên Specificity cả.

BEM: mình mặc định bạn đã biết đến BEM, thì một vài tôn chỉ của nó có thể kể đến như:

Tránh sử dụng id (#foo): lý do thì như mình đã chia sẻ, id có trọng số lớn và khá khó để override, nên việc cố gắng override nó sẽ dễ đẩy CSS của bạn đến một tương lai không mấy sáng sủa.

Tránh nested selector, cố gắng làm phẳng selector: cũng cùng lý do, nested selector cũng làm tăng trọng số của selector.

Ví dụ BEM sẽ khuyến khích:

/* BEM thích điều này, trọng số chỉ là 0,1,0 nhưng vẫn rất specific

và khó bị conflict */



.block {}

.block__elem1 {}

.block__elem2 {}

.block__elem3 {}

/* Trọng số sẽ là 0,2,0, cũng không quá tệ, nhưng BEM không khuyến khích

và nó cũng rất dễ bị conflict. */

.block {}

.block .elem1 {}

.block .elem2 {}

.block .elem3 {}

Tổng kết

Trên đây là một số kiến thức nhỏ mình đã tìm hiểu được, hi vọng nó sẽ giúp ích cho bạn trong dự án.

The post Tối ưu cách viết CSS appeared first on Tomoshare.