Thư viện trong css là các đoạn mã css đã được thiết kế trước cho một mục đích nào đó. Việc sử dụng một thư viện css thường bao gồm 2 công đoạn:
- 1. Khai báo thư viện css.
- 2. Sử dụng thư viện theo cú pháp riêng đã được khai báo trong thư viện.
Hướng dẫn khai báo thư viện css
Thông thường, các thư viện css sẽ được đóng gói thành các file css. Như vậy, để khai báo, chúng ta sẽ sử dụng thẻ link tương tự như cách sau:
<head>
<title>Sử dụng thư viện fontawesome</title>
<link rel='stylesheet' href='css/fontawesome.css' type='text/css' />
<link rel='stylesheet' href='css/my_custom.css' type='text/css' />
</head>Lưu ý: File thư viện css nếu có phải được khai báo trước file custom css.
Trong ví dụ trên là cách khai báo thư viện fontawesome. Chúng ta thấy file CSS của thư viện font awesome được khai báo trước file my_custom. Mục đích của việc khai báo thư viện trước file custom là để chúng ta chủ động hơn trong việc điều phối thư viện và làm chủ mã nguồn website của mình.
Nguyên tắc sử dụng thư viện css
- Không chỉnh sửa file thư viện nếu thật sự không cần thiết, hay vẫn còn phương pháp khác thay thế.
- Cú pháp sử dụng thư viện nếu có, nên đặt trước cú pháp sử dụng custom css.
Xét ví dụ sau:
Giả sử chúng ta có file index.html, index.css và lib.css như sau:
File index.html
<!DOCTYPE html>
<html>
<head>
<title>Nguyên tắc sử dụng thư viện css</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/lib.css" rel="stylesheet" type="text/css"/>
<link href="css/index.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<span class="btn btn_primary btn_goto_shoping">Go to my store</span>
</body>
</html>
File index.css
.btn_goto_shoping{
color: yellow;
}
File thư viện lib.css
.btn{
padding: 7.5px 15px;
border-radius: 2px;
display: inline-block;
color: #ffffff;
}
.btn_primary{
background-color: #0066ff;
}
Trong ví dụ này:
Chúng ta đã sử dụng class btn và btn_primary của thư viện lib.css để định hình dạng nút cho thẻ span. Đồng thời, chúng ta sử dụng thêm class btn_goto_shoping để custom thêm cho nút chuyển tới cửa hàng. Như vậy, thứ tự đặt các class cho thẻ span phải như trên, nghĩa là theo dúng thứ tự: btn btn_primary btn_goto_shoping (class của thư viện viết trước, class của các file custom viết sau).
Sử dụng nhiều thư viện trong một website
Về mặt lý thuyết, và ngay cả trong thực tế, một website sẽ gồm nhiều thư viện css để tiết kiệm công sức của lập trình viên. Tuy nhiên, khi sử dụng nhiều thư viện css, chúng ta cần tuân theo các nguyên tắc sau:
- Hạn chế trùng lặp chức năng giữa các thư viện.
- Thư viện nào quan trọng hơn thì khai báo phía sau thư viện ít quan trọng.
Cập nhật thư viện css
Có một thực tế rất khắc nghiệt như sau: Các thư viện sẽ thường xuyên được cập nhật, với mục đích cập nhật công nghệ mới và sửa lỗi. Như vậy, chúng ta sẽ phải sử dụng phiên bản trực tiếp hoặc cập nhật thư viện về website. Cả hai cách, khi thực hiện chúng ta đều cần phải lưu ý các điều sau:
- Việc cập nhật là có thật sự cần thiết hay không.
- Cập nhật thư viện này sẽ mang đến thay đổi như thế nào cho toàn website.
- Các thư viện khác, và bản thân website đang sử dụng có tương thích với bản mới hay không, nếu không tương thích có thể giải quyết được hay không, và nếu giải quyết được thì trong thời gian bao lâu.
Bên trên là bài học về cách sử dụng chung cho các thư viện css. Các bạn có thể tham khảo cách sử dụng các thư viện phổ biến sau:
Bình luận
Bài viết có vấn đề ? Hãy cho chúng tôi biết.
Gửi báo cáo sai phạmHãy để nguồn Suta.media khi phát hành lại nội dung này !
Hãy là nguời đầu tiên bình luận về Cách sử dụng thư viện trong css