Đặt lại CSS tối thiểu

Các luật đặt lại CSS của bạn không cần phải dài một dặm và hầu hết các trình duyệt hiện đại hiện nay khá đồng nhất với bố cục cơ sở của chúng. Dưới đây, bạn sẽ thấy những gì tôi đánh giá là liều thuốc hiệu quả tối thiểu tốt để cài đặt lại. Chỉ cần sao chép nó trong các dự án mới của bạn và bạn sẽ bắt đầu và chạy.

🔖 Đánh dấu trang này để tham khảo nhanh chóng và dễ dàng

Đây là cài đặt lại CSS:

html {
  box-sizing: border-box;
  font-size: 16px;
}

*, *:before, *:after {
  box-sizing: inherit;
}

body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

ol, ul {
  list-style: none;
}

img {
  max-width: 100%;
  height: auto;
}

Một số điều cần lưu ý

Như bạn thấy , tôi đã bao gồm một luật để hình ảnh phản hồi theo mặc định.
Có thể cho rằng phần quan trọng nhất của cài đặt lại CSS này là box-sizing: border-box , vì điều này sẽ đảm bảo định cỡ nhất quán và có thể dự đoán được. Giá trị mặc định của hộp nội dung không tính đến phần đệm hoặc đường viền.
Bạn có thể xóa luật cho ol và ul nếu bạn muốn giữ các dấu đầu dòng mặc định cho danh sách của bạn .
Với font-weight: normal các tiêu đề font-weight: normal sẽ không được in đậm theo mặc định. Loại bỏ điều đó nếu bạn không bận tâm đến giao diện mặc định.
Tôi đã đặt kích thước phông chữ mặc định là 16px. Mọi thứ khác có thể được chỉ định bằng đơn vị rem và nó sẽ dựa trên 16px đó. Sau đó, nếu bạn muốn điều chỉnh toàn cục để làm cho văn bản lớn hơn một chút về tổng thể, bạn có thể thay đổi luật cơ sở cho thông tin như 17 hoặc 18px.

🙈 Nghĩ rằng cái gì còn thiếu? Hãy liên hệ ở đây để cho ta biết!

Tags:

Các tin liên quan

Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23
Bố cục lưới CSS: Từ khóa Span
2016-12-21
Bố cục lưới CSS: Giới thiệu
2016-12-15
Tạo kiểu văn bản giữ chỗ bằng CSS
2016-12-10
Các giá trị kế thừa, ban đầu và không đặt cho các thuộc tính CSS
2016-12-10
Tham chiếu bộ chọn CSS
2016-08-18
The: not Pseudo-Class trong CSS
2016-07-06
Hàm CSS attr ()
2016-06-20