4 Cách Cần Tận Dụng Của CSS Cơ Bản
Dưới đây là các CSS rất cơ bản mà bạn sẽ rất hay sử dụng, việc tận dụng chúng một cách triệt để sẽ giúp bạn giảm được thời gian sinh đẻ code không có kế hoạch. Sẽ rất là thú vị đấy, bắt đầu thôi.
1. Tận dụng `::before` `::after` (pseudo-element)
2. Sử dụng `em` và `rem`
3. Sử dụng CSS clamp
4. Khai báo biến dùng chung
Kết
Tận dụng (pseudo-element)
Before và after là một trong nhiều pseudo-elements, chúng là các phần tử giả sinh ra trong element bằng cách sử dụng CSS. Before và after là một element đầu tiên và một element cuối cùng trong một phần tử tương ứng. Việc sử dụng tốt phần tử giả này sẽ giúp tiết kiệm thời gian và đỡ phải code thêm HTML.
- Sử dụng với img có src lỗi.
See the Pen image_with_before by Phuong (@sillverit) on CodePen.
- Sử dụng để vẽ một số UI đơn giản.
See the Pen image_with_before by Phuong (@sillverit) on CodePen.
- Sử dụng để làm animation đơn giản.
See the Pen btn_animation_with_before by Phuong (@sillverit) on CodePen.
Sử dụng và .
Em và Rem là 2 đơn vị tham chiếu tỷ lệ.
Rem là đơn vị tham chiếu với thuộc tính font-size của phần tử root - phần tử root là tag html và mặc định font-size của nó là 16px.
Em là đơn vị tham chiếu với thuộc tính font-size của phần từ cha trực tiếp hoặc chính nó.
Việc tận dụng 2 thuộc tính tham chiếu này sẽ giúp bạn dễ dàng hơn khi làm reponsive.
See the Pen btn_animation_with_before by Phuong (@sillverit) on CodePen.
Bạn hãy chú ý các dòng này
Đoạn mã ở trên thật chất chỉ có CSS font-size của thẻ html là thay đổi mà thôi, tất cả thuộc tính CSS của các thẻ khác là không đổi, tuy nhiên khi thay đổi ở những khung hình khác nhau thì kích cở chử và chiều dài của giao diện đều thay đổi tương ứng, đó là nhờ 2 đơn vị tham chiếu em và rem.
Sử dụng CSS clamp.
Responsive đã trở thành nền tảng trong phát triển web hiện đại - đảm bảo rằng các trang web thích ứng liền mạch với nhiều kích cỡ màn hình và thiết bị khác nhau. Từ đó clamp một hàm mà CSS cung cấp nhưng một giải pháp linh hoạt cho nhà phát triển web đáp ứng với các yêu cầu thiết kế.
Hàm clamp có 3 thuộc tính:
- Giá trị nhỏ nhất.
- Giá trị ưu tiên.
- Giá trị lớn nhất.
Với 3 thuộc tính này cho phép nhà phát triển đặt những giá trị trong một phạm vi chỉ định, giúp nhà phát triển lập trình linh hoạt hơn nhưng vẫn đảm bảo thiết kế không bị hỏng hoặc không thể đọc được trên màn hình khác nhau.
Tương tự với cách này thì mình hoàn toàn có thể áp dụng cho :
Nhìn chung, việc tận dụng tốt clamp cho chiều rộng và kích thước phông chữ trong thiết kế đáp ứng mang lại rất nhiều lợi ích. Tính linh hoạt, đơn giản và tác động tích cực của nó đến trải nghiệm người dùng khiến nó trở thành một công cụ có giá trị cho các nhà phát triển muốn tạo các trang web có khả năng thích ứng và hấp dẫn về mặt hình ảnh.
Khai báo biến dùng chung
Khi mình làm việc trên các dự án web lớn, việc quản lý CSS có thể trở nên phức tạp hơn. Việc duy trì sự đồng nhất sẽ trở thành một thách thức. Để giải quyết vấn đề này, việc sử dụng biến CSS là một chiến lược mạnh mẽ để khai báo và quản lý các giá trị được sử dụng chung.
Xác định các biến dùng chung.
Thông thường sẽ bao gồm: màu sắc, fonts, spacing,...
Sử dụng các biến dùng chung.
Khi đã khai báo biến chung, bạn phải sử dụng chúng trong bất kỳ phần CSS nào của dự án, có cùng tính chất với nhau. Để khi cần thay đổi thì mình sẽ thay đổi biến dùng chung là ổn.
Kết
Nhìn chung 4 cách này là rất cơ bản của CSS. Mặc dù là những CSS cơ bản nhưng khi được áp dụng đúng cách, không chỉ giúp tối ưu hóa mã nguồn mà còn tăng tính linh hoạt và bảo trì trong quá trình phát triển web. Hãy áp dụng những nguyên tắc này vào công việc của bạn để xây dựng những trang web đẹp và hiệu quả.
Chúc các bạn lập trình vui vẻ!