Cách sử dụng thư viện trong css

Tri thức / Lập trình / Lập trình web / Html & Css      49 - 0      28 ngày trước
Cách sử dụng thư viện trong css
0 0

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:

  • Khai báo thư viện
  • Sử dụng thư viện theo cú pháp riêng đã được khai báo trong thư viện

 

Nguyên tắc khai báo thư viện

  • File thư viện css nếu có phải được khai báo trước file custom css.

Thông thường, các thư viện css sẽ được đóng gói thành các file css, để 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>

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. Và 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à fix lỗi. Như vậy, chúng ta sẽ phải sử dụng phiên bản live 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:

 

Hãy cùng Tủ tri thức chinh phục CSS.

tutrithuc.com nơi chia sẻ kinh nghiệm về lập trình website.

Tạo vào 2019-10-23 05:55:48, Cập nhật 28 ngày trước
TuTriThuc.com TuTriThuc.com Theo dõi 1
Chia sẻ Cách sử dụng thư viện trong css tới bạn bè để mọi người cùng đọc nhé !
Bình luận
Top phản hồi
Đang tải bình luận bài viết Phản hồi bài viết Cách sử dụng thư viện trong css
Gửi đi
Bạn đang đọc bài viết Cách sử dụng thư viện trong css , hãy để nguồn tutrithuc.com khi phát hành lại nội dung này !
37693
0.07537579536438