5 Nguyên tắc viết CSS Nâng cao Kỹ năng lập trình Front end

0
658

Viết CSS thật đơn giản, nhưng đôi khi lại không đơn giản tý nào nếu dự án bị phình lớn hay số lượng người làm trong dự án tăng lên.

Lúc này, các vấn đề trở nên rõ ràng hơn và có thể gây ra vấn đề nghiêm trọng.

Sửa chữa các vấn đề về CSS lúc này là rất khó khăn,. Thậm chí khó khăn nhân đôi khi xuất hiện !important / code quá dài hoặc code CSS không sử dụng đến.

Dẫn tới khó khăn chồng chất khó khăn.

Vậy có nguyên tắc nào để giúp Kỹ năng viết CSS tốt hơn không?

Ở mức độ chuyên nghiệp, viết CSS theo nguyên tắc sẽ làm cho code CSS dễ bảo trì, mở rộng, dễ hiểu và sạch sẽ.

Chúng ta sẽ nhìn vào 5 nguyên tắc viết CSS đơn giản mà hiệu quả để giúp bạn Nâng cao kỹ năng lập trình Front end của mình ngay lập tức:

5 Nguyên tắc để Nâng cao Kỹ năng Viết CSS
5 Nguyên tắc để Nâng cao Kỹ năng Viết CSS

Nguyên tắc viết CSS #1: Đặt tên

Phil Karlton đã từng nói:

“Chỉ có hai điều khó trong Khoa học máy tính đó là: Cache vô hiệu và vấn đề Đặt tên”

Đặt tên và cấu trúc đúng các CSS selector của bạn là bước đầu tiên để làm cho CSS của bạn dễ đọc hơn, có cấu trúc và sạch hơn.

Việc thiết lập các quy tắc và các ràng buộc trong quy ước đặt tên của bạn làm cho code của bạn được chuẩn hóa, mạnh mẽ và dễ hiểu hơn.

Đây chính là lý do tại sao các khái niệm như BEM (Block-Element-Modifier), SMACSS (Kiến trúc có thể mở rộng và mô đun cho CSS) và OOCSS (CSS hướng đối tượng) phổ biến đối với dân Lập trình Front end chuyên nghiệp.

Nguyên tắc viết CSS #2: Độ đặc hiệu thấp

Ghi đè các thuộc tính CSS rất tốt, nhưng mọi thứ có thể vượt quá nhanh trong các dự án phức tạp hơn.

Các đoạn code CSS ghi đè các thuộc tính có thể trở nên rất dài và phức tạp, bạn có thể buộc phải sử dụng !important để giải quyết vấn đề cụ thể nhưng lại dễ dàng bị mất kiểm soát khi gỡ lỗi mới.

Vì thế, hạn chế sử dụng những chỉ định CSS như vậy để bạn có nhiều không gian giải quyết vấn đề sau này hơn.

/* Độ đặc hiệu thấp */
.card {}

/* Độ đặc hiệu cao */
.card .title {}

.blog-list .card img {}

.blog-list .card.featured .title {}

#js-blog-list .blog-list .card img {}

Hiểu cách trình duyệt phân tích CSS

Một trong những lợi ích của việc tuân theo nguyên tắc độ đặc hiệu thấp là khả năng mang lại hiệu suất cao. Các trình duyệt phân tích CSS từ phải sang trái.

Hãy xem ví dụ sau:

.blog-list .card img {}

Trình duyệt sẽ phân tích selector như sau:

  • Tìm kiếm thẻ img
  • Giữ lại phần tử là phần tử con của của class .card
  • Giữ lại phần tử là phần tử con của của class .blog-list

Bạn có thể thấy các selector có độ đặc hiệu cao ảnh hưởng đến hiệu suất như thế nào, đặc biệt là khi chúng ta cần chọn toàn bộ các phần tử chung như div, img, li, v.v.

Sử dụng cùng một độ đặc hiệu

Bằng cách sử dụng các bộ CSS selector có độ đặc hiệu thấp kết hợp với nguyên tắc BEM hoặc một trong các nguyên tắc đặt tên khác được đề cập trong phần trước, chúng ta có thể tạo ra chương trình hiệu suất cao, linh hoạt và dễ hiểu.

Tại sao nên sử dụng các class trong khi viết CSS?

Vì, khi chúng ta muốn giữ cùng một mức độ đặc hiệu, linh hoạt và có thể nhắm mục tiêu nhiều yếu tố. Element selector và id Selector không cung cấp tính linh hoạt mà chúng ta cần.

Hãy viết lại ví dụ trước của chúng ta bằng BEM và sử dụng độ đặc hiệu thấp.

/* Selector có độ đặc hiệu thấp */
.card {}

/* Selector có độ đặc hiệu thấp kết hợp với BEM */
.card__title {}

.blogList__image {}

.blogList__title--featured {}

.blogList__img--special {}

Bạn có thể thấy cách các selector này đơn giản, dễ hiểu và có thể dễ dàng ghi đè và mở rộng nếu cần.

Và bằng cách giữ cho chúng ở cấp độ thấp (một class duy nhất), chúng ta đảm bảo được hiệu suất luôn cao và tính linh hoạt tối ưu.

Nguyên tắc viết CSS #3: DRY

DRY là viết tắt của từ Don’t Repeat Yourself, có nghĩa là “Đừng lặp lại chính mình”.

Ở trường hợp này có nghĩa là “Đừng lặp lại code CSS”

Code trung lặp trong CSS có thể gây phình to chương trình, ghi đè không cần thiết, giảm khả năng bảo trì, v.v …

Vấn đề này có thể được khắc phục bằng cách cấu trúc mã phù hợp và có tài liệu chất lượng cao.

Storybook.js.org là một công cụ miễn phí cho phép bạn tạo tổng quan về các thành phần Front end có sẵn và tạo tài liệu tốt.

/* Không sử dụng nguyên tắc DRY */
.warningStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eba834;
}

.errorStatus {
  padding: 0.5rem;
  font-weight: bold;
  color: #eb3d34;
}

.form-errorStatus {
  padding: 0.5rem 0 0 0;
  font-weight: bold;
  color: #eb3d34;
}

So sánh với code CSS sử dụng nguyên tắc DRY:

/* With DRY Principle */
.status {
  padding: 0.5rem;
  font-weight: bold;
}

.status--warning {
  color: #eba834;
}

.status--error {
  color: #eb3d34;
}

.form__status {
  padding: 0.5rem 0 0 0;
}

Nguyên tắc viết CSS #4: Nguyên tắc trách nhiệm duy nhất

Bằng cách sử dụng nguyên tắc trách nhiệm duy nhất trong CSS của chúng ta, chúng ta có thể đảm bảo rằng các class CSS của chúng ta dễ dàng được mở rộng và ghi đè.

Hãy xem ví dụ sau đây:

.button {
  padding: 1rem 2rem;
  font-size: 2rem;
  border-radius: 0.2rem;
  background-color: #eb4934;
  color: #fff;
  font-weight: bold;
}

.button--secondary {
  border-radius: 0;
  font-size: 1rem;
  background-color: #888;
}

Chúng ta có thể thấy rằng nếu chúng ta muốn mở rộng class .button bằng .button–secondary, chúng ta sẽ cần phải thực hiện nhiều phần ghi đè, trong khi chúng ta chỉ muốn áp dụng background-color khác.

Vấn đề là class .button của chúng ta có một số vai trò:

  • Thiết lập layout (padding)
  • Thiết lập chữ (font-size, font-weight)
  • Thiết lập hiển thị (color, background-color, border-radius)

Điều này làm cho các lớp CSS của chúng ta rất khó mở rộng và kết hợp với các lớp CSS khác.

Bằng cách ghi nhớ điều này, hãy sử dụng BEM và OOCSS để cải thiện CSS của chúng ta.

/* Chia sẻ style */
.button {
  padding: 1rem 2rem;
  font-weight: bold;
  color: #fff;
}

/* Mở rộng style */
.button--radialBorder {
  border-radius: 0.2rem;
}

.button--large {
  font-size: 2rem;
}

.button--primary{
  background-color: #eb4934;
}

.button--secondary {
  background-color: #888;
}

Chúng ta đã chia các kiểu button của chúng ta thành một số class có thể được sử dụng để mở rộng class button cơ sở.

Chúng ta có thể dễ sửa đổi khi thay đổi thiết kế hoặc thêm vào các thành phần mới hơn trước kia nhiều.

Nguyên tắc viết CSS #5: Mở và Đóng

Chúng ta đã sử dụng nguyên tắc Mở và Đóng trong các ví dụ trước. Tất cả các tính năng và tùy chọn mới cần được thêm vào bởi phần mở rộng. Hãy xem ví dụ này.

.card {
  padding: 1rem;
}

.blog-list .card {
  padding: 0.5em 1rem;
}

Selector .blog-list .card có một số vấn đề tiềm ẩn như sau:

  • Một số style chỉ có thể được áp dụng nếu phần tử .card là phần tử con của phần tử danh .blog-list
  • Các style được áp dụng bắt buộc cho phần tử .card nếu được đặt bên trong phần tử .blog-list, sẽ có thể tạo ra kết quả không mong muốn và ghi đè không cần thiết.

Hãy làm lại ví dụ trước:

.card {
  padding: 1rem;
}

.blogList__card {
  padding: 0.5em 1rem;
}

Chúng ta đã khắc phục sự cố trên bằng cách có một selector duy nhất. Với selector này, chúng ta có thể tránh các hiệu ứng không mong muốn và không có style lồng nhau có điều kiện.

Tổng kết

Qua bài viết này, chúng ta đã thấy bằng cách áp dụng một vài nguyên tắc viết CSS đơn giản này, chúng ta đã cải thiện đáng kể Kỹ năng viết CSS của chúng ta:

  • Chuẩn hóa vấn đề đặt tên và cấu trúc, cải thiện khả năng đọc bằng cách sử dụng BEM, OCSS, v.v.
  • Cải thiện hiệu suất và cấu trúc bằng cách sử dụng các selector có độ đặc hiệu thấp.
  • Giảm phình code và cải thiện chất lượng code theo nguyên tắc DRY
  • Tăng tính linh hoạt và khả năng bảo trì bằng cách sử dụng nguyên tắc Mở và Đóng.

Cảm ơn bạn đã dành thời gian để đọc bài viết này. Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ hoặc để lại bình luận bên dưới đây.

TeckTrend

LEAVE A REPLY

Please enter your comment!
Please enter your name here