[CSS] Tái sử dụng CSS hiệu quả.

Tái sử dụng code trong lập trình luôn được coi là tiêu chí hàng đầu. Nó là nguyên nhân sự phổ biến của lập trình hướng đối tượng cùng với các ngôn ngữ thiết kế cho OOP như: C++, Java, C#,… Bằng việc sử dụng lại các lớp, các hàm giúp lập trình viên tiết kiệm vô số dòng code và thời gian.

Khác xa OOP, với CSS việc tái sử dụng(TSD) đơn giản vô cùng, không yêu cầu sự chính xác về số lượng tham số, kiểu dữ liệu,… Trái lại sự thiếu chặt chẽ mang theo nhiều nguy cơ phía sau một giao diện đẹp.

TSD kém khiến bạn phải viết lại rất nhiều dòng CSS. Một ngày đẹp trời sự chồng chéo những thuộc tính ấy sẽ làm trang web của bạn xô lệch, màu sắc không như ý muốn, nội dung chèn lên nhau thậm chí biến mất một vài thành phần của trang.

Thực hiện những bước cơ bản sau giúp bạn tối ưu khả năng TSD CSS của bạn.

1. Bạn cần chia code CSS ra thành nhiều file và nhúng vào khi cần thiết.

  • Xác định trước những thành phần lặp lại nhiều lần trong trang web, những đối tượng cần sự đồng nhất về thiết kế.
  • Tạo ra file CSS riêng cho chúng.

2. Đừng dùng ít class có nhiều thuộc tính hãy dùng nhiều class có ít thuộc tính.

Lấy ví dụ với các button tách riêng class để thiết lập những thuộc tính chung như padding, border, font-size,…Và sử dụng các class khác để thiết lập thuộc tính riêng.

3. Tạo ra file CSS của riêng mình.

Hãy tạo một file CSS với những class có những thuộc tính thường dùng như là căn lề cho text, màu background, màu chữ, border hay cả box-shadow… Bạn có thể mang file này đi bất cứ đâu để sử dụng.

4. Sử dụng các CSS framework.

TSD CSS từ các framework là cách làm rất phổ biến hiện nay. Nó giúp đẩy nhanh tốc độ phát triển ứng dụng. Bên cạnh đó cũng giúp ứng dụng có sự thống nhất trong thiết kế. Việc làm quên với các framework này cũng rất nhanh nếu bạn đã nắm vững CSS cơ bản.

Kết luận

Như vậy mình đã giới thiệu tới các bạn những cách thức cần thiết để TSD CSS hiệu quả. Hẹn gặp lại các bạn trong các bài viết và chủ đề hay ho sau.