-
ddhiep
user
-
Tham gia ngày: 09.03.2015
Ngày gửi: 19.10.2015
Bài gửi: 189
Xem: 3,148
-
Bạn thích bài viết này?
Mẹo hay khi viết code CSS
Không sử dụng thiết lập toàn cầu
Sử dụng thiết lập toàn cầu để loại bỏ các mặc định về margin và [padding] từ tất cả các phần tử [HTML] tuyệt đối không sử dụng. Nó không chỉ chậm mà còn không hiệu quả nhưng bạn phải xác định margin và padding cho mỗi yếu tố khi cần nó. Thay vì đó hãy sử dụng tập hợp các thiết lập CSS như của Eric Meyer.
Không tốt
*{ margin:0; padding:0; }
Tốt
*{ margin:0; padding:0; }
- html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 }
- table { border-collapse:collapse; border-spacing:0 }
- fieldset, img { border:0 }
- ul { list-style:none }
Không dùng Hacks IE
Mặc dù CSS hacks có thể có ích cho việc duy trì một cái nhìn nhất quán của website trên các trình duyệt cũ như IE6, nhưng chúng có vấn đề ở những phiên bản mới của trình duyệt IE như IE8 hỗ trợ tiêu chuẩn CSS ở cấp độ cao và sử dụng hacks có thể loại bỏ các cách bố trí. Bạn nên sử dụng các bản trình bày có điều kiện thay vì nhắm đến các phiên bản cụ thể của IE. Ví dụ, bằng cách sử dụng dòng lệnh của code trong thẻ <head> bạn sẽ chỉ load tập tin iestypes.css khi trình duyệt là IE6 hoặc nhỏ hơn.
Quirksmode
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="styles/ie-styles.css" />
<![endif]-->
Sử dụng tên có ý nghĩa cho ID va class
Giả sử bạn định nghĩa style slidebar sử dụng [class] .leftbox và sau một vài lần thiết kế lại, bạn chuyển nó qua bên phải, sau đó nó sẽ có ý nghĩa để có leftbox như tên box mà bạn vừa chuyển. Bạn nên đặt ra một vài suy nghĩ trước khi tuyên bố các class và ID cho các phần tử để chúng có ý nghĩa và dễ hiểu sau này.
Tận dụng CSS inheritance
Nếu nhiều phần tử con của phần tử cha mẹ sử dụng cùng style trên một trang web. Nó sẽ tốt hơn khi xác định chúng cho các phần tử cha mẹ của chúng và để các CSS inheritance làm tất cả mọi việc. Bạn sẽ có thể dễ dàng update code của bạn sau này và nó sẽ làm giảm kích thước file CSS đáng kể
Không tốt
- #container li{ font-family:Georgia, serif; }
- #container p{ font-family:Georgia, serif; }
- #container h1{font-family:Georgia, serif; }
Tốt hơn
#container{ font-family:Georgia, serif; }
Kết hợp nhiều bộ chọn lọc
Bạn có thể kết hợp nhiều bộ lọc vào trong một nếu chúng có các style nhất định phổ biến. Nó sẽ giúp bạn tiết kiệm thời gian và không gian.
Không tốt
- h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
- h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
- h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
Tốt hơn
- h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
Sử dụng thuộc tính viết tắt
Sử dụng các thuộc tính viết tắt của CSS để viết code CSS nhanh hơn và giảm kích cỡ file. Các ký hiệu viết tắt có thể được sử dụng cho margin, padding, border, font, background và cũng như cho các giá trị màu sắc.
Không tốt
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
Tốt hơn
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
Nguồn: web.vivicorp.com
Chủ đề cùng chuyên mục
Thành viên tích cực
-
support
Upload: 57 -
admin
Upload: 18 -
nguyenminh
Upload: 93 -
vknyckp
Upload: 218 -
duytungrp
Upload: 9 -
ddhiep
Upload: 679 -
hue_nguyen
Upload: 271 -
tuananh86
Upload: 4 -
thaile
Upload: 17 -
hoctiengducgiaotiep
Upload: 3 -
quynhanh
Upload: 24 -
thuyanh1990
Upload: 4
