CSS là một trong những công nghệ cốt lõi của lập trình front-end, giúp tạo ra giao diện đẹp mắt và tối ưu cho người dùng. Tuy nhiên, việc viết CSS không chỉ dừng lại ở việc làm đúng, mà còn cần làm sao cho hiệu quả, dễ bảo trì và chuyên nghiệp. Trong bài viết này, CodeTutHub sẽ chia sẻ một số mẹo giúp bạn nâng cấp kỹ năng viết CSS của mình lên một tầm cao mới.

1. Sử dụng :not để tối ưu hóa quy tắc CSS

Pseudo-class :not (phủ định) giúp bạn loại trừ các phần tử mà không cần tạo thêm các class hoặc ID. Điều này không chỉ làm giảm độ phức tạp của CSS mà còn tăng tính linh hoạt.

Ví dụ:

css
button:not(.primary) {
  background-color: #ccc;
  color: #000;
}

Trong ví dụ trên, mọi button không có class .primary sẽ được áp dụng các kiểu định dạng khác.

Lợi ích:

  • Giảm số lượng class CSS.
  • Dễ đọc hơn và hạn chế quy tắc dư thừa.

2. Sử dụng rem, em thay cho px

Sử dụng các đơn vị rem và em thay vì px giúp giao diện trở nên linh hoạt hơn, đặc biệt trong các thiết kế responsive.

  • rem: Kích thước dựa trên font-size gốc của root element (html).
  • em: Kích thước dựa trên font-size của chính element chứa nó.

Ví dụ:

css
html {
  font-size: 16px; /* 1rem = 16px */
}

h1 {
  font-size: 2rem; /* 32px */
}

p {
  font-size: 1em; /* kế thừa từ cha */
}

Lợi ích:

  • Dễ dàng thay đổi toàn bộ kích thước giao diện chỉ bằng cách thay đổi font-size của root.
  • Phù hợp với các thiết bị có độ phân giải khác nhau.

3. Sử dụng Shorthand

CSS cung cấp cú pháp shorthand (viết tắt) để gom nhiều thuộc tính lại trong một dòng, giúp mã gọn gàng và dễ quản lý hơn.

Ví dụ:

css
/* Không dùng shorthand */
margin-top: 10px;
margin-right: 15px;
margin-bottom: 20px;
margin-left: 15px;

/* Sử dụng shorthand */
margin: 10px 15px 20px;

Lợi ích:

  • Tiết kiệm thời gian và dòng code.
  • Dễ đọc hơn, đặc biệt với các thuộc tính như margin, padding, border.

4. DRY Code - Don't Repeat Yourself

Nguyên tắc DRY giúp giảm việc lặp lại các đoạn code tương tự bằng cách tái sử dụng các class và biến CSS.

Ví dụ:

css
/* Lặp code - Anti DRY */
.card-title {
  font-size: 1.5rem;
  font-weight: bold;
}

.section-title {
  font-size: 1.5rem;
  font-weight: bold;
}

/* DRY Code */
.title {
  font-size: 1.5rem;
  font-weight: bold;
}

Lợi ích:

  • Giảm thiểu trùng lặp, giúp CSS dễ bảo trì hơn.
  • Khi cần thay đổi, chỉ cần sửa một nơi.

5. Reset CSS default value

Các trình duyệt có thiết lập mặc định khác nhau cho các phần tử HTML, dẫn đến sự không đồng nhất trong giao diện. Hãy sử dụng Reset CSS để đồng bộ hóa.

Ví dụ:

css
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Lợi ích:

  • Đảm bảo sự nhất quán trong giao diện.
  • Tăng tốc độ làm việc khi không phải lo lắng về giá trị mặc định.

6. Sử dụng ID đúng cách

ID có ưu tiên cao hơn class trong CSS, vì vậy hãy sử dụng ID một cách cẩn thận và chỉ khi thực sự cần thiết.

Ví dụ không tốt:

css
#header {
  background-color: blue;
}
#header h1 {
  font-size: 2rem;
}

Cách tốt hơn:

css
.header {
  background-color: blue;
}

.header-title {
  font-size: 2rem;
}

Lý do:

  • ID không nên được lạm dụng vì khó tái sử dụng.
  • Class linh hoạt và phù hợp hơn trong việc áp dụng phong cách.

7. Không Hardcode kích thước

Tránh sử dụng kích thước cố định (hardcode) như width: 400px hay height: 200px, vì chúng làm giảm tính linh hoạt của giao diện.

Ví dụ không tốt:

css
.container {
  width: 400px;
  height: 300px;
}

Thay vào đó:

css
.container {
  max-width: 90%;
  height: auto;
}

Lợi ích:

  • Giao diện thích nghi tốt hơn với các thiết bị và kích thước màn hình khác nhau.

8. Cung cấp Fallback cho Custom Fonts

Không phải trình duyệt nào cũng hỗ trợ custom fonts. Hãy đảm bảo cung cấp fallback font để giữ trải nghiệm người dùng mượt mà.

Ví dụ:

css
body {
  font-family: 'Roboto', Arial, sans-serif;
}

Lợi ích:

  • Tránh trường hợp giao diện bị vỡ khi font không tải được.
  • Tăng tốc độ tải trang.

9. Tổ chức và quản lý file CSS

Một mẹo quan trọng khác là tổ chức mã CSS một cách khoa học. Bạn có thể chia nhỏ file CSS thành nhiều module và sử dụng các framework như SASS hoặc LESS để dễ dàng quản lý hơn.

Ví dụ:

css
_variables.scss
// File _variables.scss
$primary-color: #3498db;

// File _buttons.scss
.button {
  background-color: $primary-color;
  padding: 10px 20px;
}

Lợi ích:

  • Dễ dàng mở rộng và bảo trì dự án.
  • Quản lý các thành phần phức tạp một cách gọn gàng.

10. Sử dụng CSS Grid và Flexbox thay vì Floats

CSS Grid và Flexbox là các công cụ mạnh mẽ giúp bạn xây dựng layout hiện đại, thay thế cho việc sử dụng float truyền thống.

Ví dụ: CSS Grid:

css
.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

Ví dụ: Flexbox:

css
.container {
  display: flex;
  justify-content: space-between;
}

Lợi ích:

  • Linh hoạt, dễ dàng điều chỉnh layout.
  • Phù hợp với thiết kế responsive.

Kết Luận

Viết CSS một cách chuyên nghiệp không chỉ giúp bạn tạo ra giao diện đẹp mắt mà còn giúp mã của bạn dễ quản lý và bảo trì hơn. Hãy áp dụng các mẹo trên vào dự án của bạn để cải thiện kỹ năng và nâng cao hiệu quả làm việc.

Nếu bạn có mẹo nào thú vị khác, hãy chia sẻ với cộng đồng tại CodeTutHub!