Thủ thuật CSS và những mẹo hay dành cho developer (phần 2)
Ở phần trước, chúng ta đã tìm hiểu một số thủ thuật CSS hữu ích giúp công việc dựng thiết kế web dễ dàng hơn. Bài này Bizfly Cloud sẽ tiếp tục tìm hiểu một số mẹo hay trong CSS nhé.
Đừng lặp lại
Một trong những ưu điểm của CSS là hầu hết các thuộc tính của nó đều kế thừa giá trị từ các thuộc tính cha gần nó nhất. Vì vậy, chúng ta không cần thiết phải đặt lại giá trị cho các phần tử có tính kế thừa.
Ví dụ: thuộc tính font hầu như luôn được kế thừa giá trị từ các phần tử cha. Vì thế, chúng ta không cần thiết phải thiết lập giá trị cho thuộc tính này trong các phần tử con trên trang. Thay vào đó, để lựa chọn font chữ mặc định cho website, ta chỉ cần thêm style font cho thẻ <html> hoặc <body>. Khi đó toàn bộ các phần tử con nằm trong nó sẽ được kế thừa giá trị này.
body {
font: normal 16px/1.4 sans-serif;
}
Để thay đổi font chữ cho bất kỳ một phần tử (hoặc class) nào, chúng ta chỉ cần thiết lập giá trị font cho riêng phần tử (hoặc class) đó. Ngoài ra, các phần tử khác vẫn sẽ sử dụng font chữ mặc định đã thiết lập ban đầu. Điều cần lưu ý ở đây là tránh tối đa việc lặp lại code khi không cần thiết.
Mẹo: Bạn có thể tham khảo bài viết Inherit, Initial và Unset trong CSS để hiểu thêm về khái niệm thuộc tính kế thừa.
Sử dụng transform
Khi tạo hiệu ứng chuyển động animation cho các phần tử HTML, nhiều người nghĩ đến việc thay đổi kích thước của phần tử (width, height) hoặc sử dụng các giá trị top, bottom, left, right. Cách làm này không sai, nhưng không phải cách tốt nhất.
Thay vào đó, chúng ta nên sử dụng thuộc tính transform() để thể hiện các hiệu ứng động cho phần tử. Sử dụng transform sẽ giúp animation trở nên mượt mà hơn và code dễ đọc hơn.
Hãy xét ví dụ dưới đây:
.ball {
left: 50px;
transition: 0.4s ease-out;
}
/* Tạo Animation bằng cách set giá trị cho left */
.ball.slide-out {
left: 500px;
}
/* Tạo Animation bằng cách sử dụng transform */
.ball.slide-out {
transform: translateX(450px);
}
Trong ví dụ trên, trường hợp chúng ta tạo hiệu ứng chuyển động bằng cách điều chỉnh thông số của giá trị left, chúng ta cần nhìn lại thông số left ban đầu và tính toán để suy ra animation của left. Trong khi đó, nếu sử dụng transform, ta chỉ việc nhìn vào translateX(450px) để biết animation hoạt động như thế nào.
Transform hiện nay đã tương thích với hầu hết các browser phổ biến, khiến cho tạo và sử dụng hiệu ứng CSS đơn giản hơn.
Sử dụng framework để tiết kiệm thời gian và công sức
Cho dù là người mới hay những "chuyên gia CSS" thì việc sử dụng framework vẫn sẽ giúp chúng ta tiết kiệm rất nhiều thời gian và công sức. Trong môi trường công việc thực tế, điều này đồng nghĩa với hoàn thành dự án nhanh hơn, bạn sẽ có thêm thời gian để thực hiện các dự án mới. Ai mà không thích gia tăng thu nhập một cách nhanh chóng?
Mặt khác, cộng đồng những người làm CSS rất lớn, những thư viện khổng lồ được tạo ra và liên tục cập nhật các framework mới. Từ những framework để thực hiện các công việc đơn giản, tới các framework lớn đủ để xây cả một hệ thống trang web. Hầu hết trong số đó là Open Source. Vì vậy, có nhiều khả năng code của các hiệu ứng bạn cần đã có sẵn trong thư viện. Tất cả những gì bạn cần làm khi đó chỉ là điều chỉnh code cho phù hợp với nhu cầu, thay vì phải code từ đầu.
Một số framework CSS phổ biến bạn có thể sử dụng để xây dựng giao diện của riêng mình: TentCSS, Bulma, Bootstrap 4.
Ngoài ra, Github và Codepen là hai trong số nhiều địa chỉ tin cậy bạn có thể tham khảo mỗi khi gặp một khúc mắc nào đó trong CSS.
Hiểu về mức độ ưu tiên của Selectors
Những người mới làm việc với CSS thường có một hiểu lầm tai hại là: thuộc tính khai báo sau sẽ mặc định ghi đè lên thuộc tính khai báo trước. Đây là một nhận định sai.
Hãy xem xét ví dụ sau:
<a href='#' id='blue-btn' class="active">Active Button </a>
a{
color: #fff;
padding: 15px;
}
a#blue-btn {
background-color: blue;
}
a.active {
background-color: red;
}
Ta được kết quả như sau:
Trong ví dụ trên, mặc dù class selector được khai báo sau, nhưng giá trị red không thể ghi đè giá trị blue, mà kết quả vẫn cho ra button màu xanh thay vì màu đỏ. Điều này xảy ra vì id selector có mức độ ưu tiên cao hơn so với class selector.
Sự thật là khả năng ghi đè giá trị của các thuộc tính CSS phụ thuộc vào mức độ ưu tiên của từng loại selectors khác nhau:
ID (#id) > Class (.class) > Type (header)
Theo quy tắc, selector càng cụ thể thì có mức độ ưu tiên càng cao. Giả sử bạn có 2 selectors là a#button.active và a#button, thì a#button.active sẽ có mức độ ưu tiên cao hơn. Những selector có mức độ ưu tiên cao hơn thường sẽ ghi đè thuộc tính của các selector có mức độ ưu tiên thấp hơn. Mức độ ưu tiên cao nhất là khi sử dụng !important mà tôi sẽ giới thiệu ngay sau đây.
Hạn chế sử dụng !important
Nhiều người có thói quen sử dụng !important để sửa lỗi hoặc ghi đè thuộc tính CSS. Mặc dù cách làm này mang lại hiệu quả tức thì, nhưng nó có thể sẽ gây nhiều rắc rối trong tương lai.
Thay vì sử dụng !important, hãy tìm hiểu lí do selector của bạn không hoạt động, sau đó tìm cách khắc phục vấn đề để nó hoạt động như ý bạn. Bằng cách này, code của bạn sẽ đỡ phức tạp hơn và ít có nguy cơ xảy ra lỗi hơn.
Trường hợp duy nhất cần phải sử dụng !important là khi bạn muốn ghi đè inline style trong html. Tuy nhiên trong thực tế, inline style cũng là một trong những cách làm tồi mà chúng ta nên tránh.
Sử dụng Text-transform
Thuộc tính text-transform giúp chúng ta thay đổi kiểu hiển thị của ký tự (chữ hoa, chữ thường).
Trong HTML, khi bạn muốn viết hoa để nhấn mạnh ý nghĩa hoặc tầm quan trọng của một từ, bạn sẽ viết hoa từ đó trong HTML:
<h3>Các nhân viên PHẢI đeo khẩu trang để phòng tránh Covid lây lan!</h3>
Tuy nhiên, giả sử bạn muốn format toàn bộ phần tử thành viết hoa thì việc sử dụng text-transform sẽ tối ưu hơn. Ví dụ:
<div class="covid-fighter">10 cách để ngăn chặn virus phát tán trong doanh nghiệp</div>
.covid-fighter {
text-transform: uppercase;
}
Kết quả:
10 CÁCH ĐỂ NGĂN CHẶN VIRUS PHÁT TÁN TRONG DOANH NGHIỆP
Tương tự, bạn có thể linh hoạt chuyển đổi kiểu hiển thị đoạn văn bản thành chữ thường, viết hoa đầu từ,... bằng các giá trị của thuộc tính text-transform.
Sử dụng image trong background
Khi bạn muốn thêm hình ảnh vào thiết kế mà vẫn muốn đáp ứng responsive, hãy xem xét sử dụng thẻ với thuộc tính background trong CSS thay vì sử dụng phần tử <img> trong HTML.
Điều này giúp cho việc style hình ảnh trở nên dễ dàng và thuận tiện hơn, nhờ vào các thuộc tính background-position, background-size và nhiều thuộc tính khác của background.
Hay xem xét ví dụ sau:
<section>
<p>Img element</p>
<img src="images/bicycle.jpg" alt="bicycle">
</section>
<section>
<p>Div with background image</p>
<div></div>
</section>
img {
width: 300px;
height: 200px;
}
div {
width: 300px;
height: 200px;
background: url('images/bicycle.jpg');
background-position: center center;
background-size: cover;
}
section{
float: left;
margin: 15px;
}
Ta thu được kết quả như sau:
Như bạn thấy, sử dụng image với thuộc tính background thay vì thẻ <img> đơn thuần giúp cho hình ảnh không bị bóp méo. Tuy nhiên, phương pháp này cũng có một nhược điểm là hình ảnh sẽ khó được index bởi Google hơn, ảnh hưởng nhẹ tới khả năng cạnh tranh trong quá trình tối ưu hóa bộ máy tìm kiếm (SEO). Vấn đề này có thể được giải quyết bởi đối tượng object-fit, tuy nhiên nó chưa tương thích với tất cả các trình duyệt.
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Thủ thuật CSS và những mẹo hay dành cho developer (phần 2)
