hướng dẫn sử dụng reset css hợp lý

Reset CSS là gì ? Cách sử dụng reset CSS hợp lý9 phút đọc

Reset CSS là gì ? Cách sử dụng Reset CSS như thế nào ? là những câu hỏi quen thuộc của những bạn mới bước chân vào con đường lập trình website.

Có thể nói đây là kiến thức cơ bản của cơ bản mà bất cứ ai khi làm việc liên quan đến website nói chung hay CSS nói riêng đều phải biết.

Và trong bài viết này mình sẽ giúp các bạn trả lời những câu hỏi trên và giới thiệu cho bạn những nguồn copy Reset CSS uy tín cùng ưu điểm nhược điểm của chúng.

Reset CSS là gì ?

Reset CSS là file CSS giúp cho việc hiển thị trên website thống nhất trên các trình duyệt khác nhau như Google Chrome, Safari hay Internet Explorer.

Mỗi trình duyệt web kể trên đều có những định dạng CSS mặc định không giống nhau.Do đó với một định dạng CSS ta viết ra cho một website thì sẽ có những kiểu hiển thị khác nhau tùy theo trình duyệt tương ứng.

Điều này đôi khi gây ra những rắc rối không nhỏ cho người dùng.Nếu với mỗi trình duyệt ta lại phải viết định dạng cho riêng trình duyệt đó thì quả thực là không khả thi vì khối lượng công việc sẽ tăng theo dẫn đến giá cả đội lên không nhỏ cho khách hàng.

Để giải quyết vấn đề này thì Reset CSS ra đời nhằm định dạng lại toàn bộ CSS trên các trình duyệt bằng một quy chuẩn riêng.Những website trên thế giới hiện nay đều sử dụng Reset CSS và ngay tại các công ty làm web thì việc sử dụng Reset CSS là rất phổ biến.

Lợi và hại khi sử dụng Reset CSS

Cái gì khi sử dụng cũng có điểm lợi và hại của nó và Reset CSS cũng không phải là ngoại lệ.Mình có rút ra những điểm lợi và hại khi sử dụng Reset CSS trong quá trình làm việc với nó như dưới đây.

Điểm lợi khi sử dụng Reset CSS

  • Thống nhất kiểu hiển thị của website trên các trình duyệt khác nhau
  • Tiết kiệm thời gian viết CSS cho từng trình duyệt cụ thể
  • Tiết kiệm được chi phí nhân công và giảm thiểu giá thành sản phẩm

Điểm hại khi sử dụng Reset CSS

  • Lượng code CSS tăng lên đáng kể
  • Sau khi đã sử dụng Reset CSS thì phải tự viết định dạng cho từng yếu tố đã reset trước đó

Nói tóm lại thì sử dụng Reset CSS sẽ làm cho website của bạn hiển thị thống nhất trên các trình duyệt khác nhau nhưng lượng code CSS sẽ tăng lên đôi chút.

Lượng code CSS tăng lên này không ảnh hưởng đến tốc độ hiển thị của website nên bạn hoàn toàn yên tâm khi sử dụng nó.

Qua đó ta có thể thấy rằng sử dụng Reset CSS có lợi nhiều hơn hại rất nhiều nên việc sử dụng nó gần như là không thể thiếu trong mỗi dự án xây dựng website hiện nay.

Nguồn tải Reset CSS uy tín

Nguồn tải để sử dụng Reset CSS hiện nay rất nhiều và mình sẽ liệt kê ra những nguồn cho download Reset CSS miễn phí uy tín mà mình đã từng sử dụng qua cho các bạn.

Loại 1 : Reset toàn bộ

  • Eric Mayer’s Reset CSS 2.0
  • HTML5 Doctor Reset CSS

Loại 2 : Reset một phần

  • Normalize.css
  • ress
  • Reboot.css

Loại 1 sẽ reset lại toàn bộ định dạng CSS mặc định của các trình duyệt như margin, padding sẽ trở về giá trị 0, toàn bộ font-size sẽ về cùng một kích cỡ.Với loại này sẽ không có những style thừa nên dễ quản lý code hơn.

Tuy nhiên khi sử dụng loại này sẽ phải tốn thêm chút thời gian viết lại định dạng cho từng yếu tố đã reset.Như kiểu bắt đầu từ con số 0 vậy đó.

Loại 2 sẽ reset một phần định dạng CSS mặc định của các trình duyệt.Ví dụ như margin, padding sẽ trở về 0, còn những thuộc tính khác như font-size thì vẫn được giữ nguyên hiển thị sao cho đúng với giá trị của thẻ tương ứng như h1, h2,….vv.

Thẻ ul hay ol thì vẫn sẽ được thêm padding phía bên trái như mặc định thông thường.Nói chung là loại 2 này chỉ điều chỉnh những chỗ chưa thống nhất giữa các trình duyệt mà thôi.

Eric Mayer’s Reset CSS 2.0

sử dụng reset css meyerweb

Eric Mayer’s Reset CSS sẽ reset toàn bộ các yếu tố margin, padding về 0.Đồng thời font-size mặc định trên mỗi trình duyệt cũng sẽ được reset lại hết.

Tuy nhiên bộ reset này vẫn chưa hỗ trợ HTML5 nên nếu bạn có ý định reset toàn bộ CSS thì hãy dùng HTML5 Doctor Reset CSS nagy bên dưới đây.

 

HTML5 Doctor Reset CSS

sử dụng reset css html5

Đây có thể nói là bộ Reset CSS  Eric Mayer’s Reset CSS được mở rộng dành cho HTML5.Toàn bộ các thuộc tính CSS mặc định trên các trình duyệt phổ biến sẽ được reset về trạng thái ban đầu nên bạn sẽ dễ dàng viết đè CSS của mình dễ dàng hơn.

Mới đầu có hơi khó khi sử dụng nhưng khi quen rồi thì sẽ thấy nó rất tiện lợi.Bạn nhớ là phải viết lại định dạng cho một số yếu tố đã được reset nhé.

Bộ Reset CSS này không có thuộc tính  box-sizing: border-box; nên bạn có thể thêm đoạn code sau vào bộ Reset CSS này cho đầy đủ.

 

Normalize.css

sử dụng reset css normalize css

Bộ Normalize.css này sẽ reset một phần các thuộc tính CSS mặc định trên các trình duyệt khác nhau để chúng có thể hiển thị một cách thống nhất nhưng vẫn giữ lại một số yếu tố.

Ví dụ như đối với những thẻ h1, h2, h3…vẫn sẽ hiển thị những font-size phù hợp để tiết kiệm thời gian phải viết lại CSS từ đầu.

Có thể nói đây là bộ Reset CSS vừa giúp kiểu hiển thị giữa các trình duyệt thống nhất nhưng cũng vừa giữ lại định dạng của một số yếu tố giúp ta nhận biết sự khác nhau của chúng với phần còn lại.

Bộ Reset CSS này cũng không có thuộc tính  box-sizing: border-box; nên bạn có thể thêm đoạn code sau vào bộ Reset CSS này cho đầy đủ.

 

Ress

sử dụng reset css ress

Ress giống với Normalize.css nhưng nó đã được nâng cấp lên rất nhiều để có thể sử dụng dễ dàng hơn.

Bộ Ress CSS này có sẵn luôn thuộc tính box-sizing: border-box; kèm theo rất nhiều cải tiến khác nữa mà bạn có thể hiểu thông qua so sánh code của nó với code của bộ Normalize.css.

 

Reboot.css

sử dụng reset css reboot css

Reboot.css là bộ Reset CSS đang được sử dụng cho Framework CSS nổi tiếng trên thế giới đó là Bootstrap 4.Bạn có thể xem qua những đặc điểm nổi bật của nó so với những bộ Reset CSS khác.

  • Font-size sử dụng đơn vị rem
  • Xóa thuộc tính margin-top của nhiều yếu tố HTML
  • Chỉ định giá trị margin là rem để dễ dàng thích ứng với việc thay đổi size

Bộ Reboot.css được tạo ra dành cho Bootstrap 4 nên gần đây thu hút khá nhiều sự quan tâm của cộng đồng lập trình web.

 

Bộ Reset nên dùng là ?

Sử dụng Reset CSS nào cho dự án thì còn phụ thuộc vào hoàn cảnh và mục đích của từng dự án mà đưa ra sự lựa chọn hợp lý.

Theo cá nhân mình thì

  • Nếu Reset toàn bộ các yếu tố về trạng thái ban đầu thì nên dùng bộ 「HTML5 Doctor Reset CSS」vì nó tương tự bộ Eric Mayer’s Reset CSS 2.0 nhưng có hỗ trợ HTML5
  • Còn nếu Reset một phần và giữ lại những yếu tố cơ bản thì nên dùng bộ Ress vì nó đầy đủ những thành phần mà Normalize.css có đồng thời bổ sung thêm một vài yếu tố mới.

Cách sử dụng Reset CSS

Để sử dụng Reset CSS thì bạn hãy tải toàn bộ code của bộ Reset CSS mà bạn muốn sử dụng về.Sau đó thì sử dụng nó như một file CSS thông thường.

Có hai cách sử dụng Reset CSS phổ biến như dưới đây.

  • Tạo ra một file CSS có tên reset.css với code là code của bộ Reset CSS rồi dẫn file này vào trong file HTML.Bạn lưu ý là phải đặt đường dẫn file reset.css này trên tất cả những đường dẫn file CSS khác nhé.Việc này sẽ giúp trình duyệt load file reset.css này đầu tiên.
  • Copy toàn bộ code của bộ Reset CSS vào đầu file style.css rồi viết tiếp những thuộc tính CSS khác ở bên dưới.

Kết luận

Vậy là mình đã giới thiệu đến các bạn toàn bộ những kiến thức thực tế liên quan đến sử dụng Reset CSS.Đây là một kiến thức không hề khó nhưng lại rất cần thiết cho mỗi dự án.

Sắp tới sẽ còn nhiều bài viết cơ bản và nâng cao về CSS khác nữa được giới thiệu đến các bạn trên blog này.Các bạn hãy luôn theo dõi và ủng hộ blog nhé.

Bài viết trước

Bài viết sau

Nếu bạn thấy bài viết này hay và có ích thì bạn có thể ủng hộ blog của mình bằng một trong số những cách sau để mình có thêm động lực xuất bản nhiều bài viết mới chất lượng hơn nữa.

  • Chia sẻ bài viết này lên mạng xã hội qua các nút bên dưới đây.
  • Thả tim ở ngay cuối cùng bài viết này.
  • Đăng kí nhận thông báo bài viết mới bằng cách nhấn vào chuông đỏ góc dưới cùng bên trái.
  • Đánh giá chất lượng bài viết bằng sao ở trên cùng bài viết này.

Tìm kiếm bài viết trên blog với Google Search :

Bài viết có thể bạn sẽ thích

guest
0 Comments
Inline Feedbacks
View all comments
0
Hãy cùng thảo luận về bài viếtx
()
x