MỘT SỐ SHORTHAND CSS HAY DÙNG

May mắn được ngồi bên cạnh chị design, nên học hỏi được nhiều điều về CSS, cả về phong cách viết cũng như cách trick &  hack CSS all browser. Một trong cách viết CSS hay mà mình học được chính là thói quen viết shorthand CSS, làm cho code CSS ngắn gọn dễ hiểu.
Mặc dù không được làm chung với chị nữa, cũng tiếc thật, nhưng mình học được nhiều điều bài học về design. Cảm ơn chị Designer ấy nhiều.
Nay mình tổng hợp lại 1 số shorthand property mình hay dùng để dễ reference sau này.

1 . 0 VALUES

Khi định nghĩa size của 1 element nào đó là 0 , thì không cần có thêm đơn vị size sau số 0.
VD :

 padding: 10px 5px 0px 0px; 

Best practice:

 padding: 10px 5px 0 0 

2. REMOVE SELECTORS

Selector là cách chọn element nào đó trong HTML để apply CSS , nếu bạn dùng “.class” hay “#id” làm selector thì không cần phải ghi rõ loại tag nào. Tốn nhất selector không nên quá specific vì sẽ tốn time render của browser.

VD :

 div#logowrap   /*Chọn thẻ div có id = logowrap*/  

Best practice:

 #logowrap /*không cần xác định rõ loại tag nào, vì trong tương lai có thể thay thế loại tag HTML*/ 

3. *

Dùng toán tử * tức là chọn tất cả element trong HTML

{ margin: 0; }   /*Chọn tất cả element trong HTML , mỗi element có thuộc tính margin thì set margin cho element đó = 0.*/

4. BACKGROUNDS

background-image: url("logo.png");

 background-position: top center; 

background-repeat: no-repeat;

Best Practice :

background: url(logo.png) no-repeat top center; 

5. COLOURS

Khi set color cho 1 element bạn thường dùng số thập lục phân hexadecimal có 6 ký số, với ký hiệu bắt đầu là #a1a2a3a4a5a6

Nếu số thập lục phân có 3 cặp số đi với nhau, mỗi cặp là 2 ký số giống nhau, thì mỗi cặp bạn bỏ đi 1 ký số

VD :

#000000 => #000

#336699 => #369

VD sau không rút gọn được : #010101, #223345, #FFF000

6. MARGIN,PADDING

Khi apply margin 4 hướng của 1 element như sau :

margin-top:0px;

 margin-right:10px;

 margin-bottom:0px; 

margin-left:10px;

Bạn có thể rút gọn như sau :

margin:0 10px 0 10px;

Tương tự cho padding , margin và border , khi set value cho 4 hướng thì cứ theo chiều kim đồng hồ (top,right,bottom,left)=(12,3,6,9)h.

Hoặc code css trên có thể rút gọn như sau :

margin:0 10px;

- Giá trị đầu tiên là set cho top & bottom
- Giá trị thứ 2 là set cho left & right

Nếu chỉ cần set margin hay padding cho 1 bên thôi VD :

margin-left:10px

Thì cũng nên để

margin: 0 0 0 10px

Còn trường hợp đặc biệt như

margin-left:10px !important 

/*thì không nên thay bằng margin nếu không sẽ apply cho 4 hướng => sai.*/

7. BORDERS

border-width:1px; border-style:solid; border-color:#000;

Best practice :

border:1px solid #000;

Ta có thể set width 4 cạnh bằng cách sau :

border-top-width:1px; 

border-right-width:2px; 

border-bottom-width:3px; 

border-left-width:4px;

Best practice :

border-width:1px 2px 3px 4px; /*Tương tự cho border-style, border-color*/

8. FONTS

Khi nhận file thiết kế từ photoshop từ các designer, desinger thường set font cho chữ, thì đa số đều set 1 lúc dùng các property sau :

font-style:italic; 

font-variant:small-caps; 

font-weight:bold; 

font-size:1em;

 line-height:150%; 

font-family:Verdana, Arial, sans-serif;

Best practise :

font:italic small-caps bold 1em/150% Verdana, Arial, sans-serif;

Cấu trúc thứ tự viết tắc của font là : font-style, font-variant, font-weight, font-size, font-family.
Các property trên đều là optional . Nếu thiếu property nào thì browser sẽ set default cho property đó

9.LISTS

list-style-type:square; 

list-style-position:inside;

 list-style-image:url(filename.gif);And finally

Best practise :

list-style:square inside url(filename.gif);

[Suu Tam]