http://web9x.net http://websitemientrung.com
HTML + CSS

Mẹo hay khi viết code CSS

thiet ke web da nang
Written by Mai Đông Giang

[CSS] là một ngôn ngữ không phải khó kiểm soát, nhưng nếu bạn sử dụng nó cho các dự án lớn thì có thể bạn sẽ gặp một số khó khăn trong cách quản lý, nếu bạn không tuân theo các cách tiếp cận đã định rõ khi viết code CSS. 

Dưới đây là một vài lời khuyên giúp bạn viết tốt hơn và dễ dàng hơn khi quản lý [code] CSS.

Mẹo viết tốt code CSS

  1. 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 }

– See more at: http://webdeveloperplus.com/css/tips-to-write-better-css-code/#sthash.gPgfSZ2t.dpuf

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:collapseborder-spacing:0 }  

fieldset, img { border:0 }  

      ul { list-style:none }

2. 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.

Đối với thông tin trong các comment có điều kiện, hãy tham khảo bài viết quirksmode trên CSS Conditional Comments.

Quirksmode

<!–[if lte IE 6]>  

<link rel=“stylesheet” type=“text/css” href=“styles/ie-styles.css” />  

<![endif]–>


  1. 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.

  1. 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; }

– See more at: http://webdeveloperplus.com/css/tips-to-write-better-css-code/#sthash.aDjR4UEP.dpuf

#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; } 

5. 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:ArialHelveticasans-seriffont-weight:normal; }  

     h2{ font-family:ArialHelveticasans-seriffont-weight:normal; }  

     h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }


Tốt hơn

h1, h2, h3{ font-family:ArialHelveticasans-seriffont-weight:normal; }

  1. 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:ArialHelveticasans-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 ArialHelveticasans-serif;   

padding:5px 0 10px 5px;  

}

Dưới đây là một hướng dẫn đầy đủ về thuộc tính viết tắt CSS

  1. Tổ chức code CSS

Tổ chức code CSS của bạn trong một khuôn khổ nhất định sẽ làm cho nó dễ dàng hơn khi tìm kiếm một điều gì đó sau này và giúp bạn tiết kiệm nhiều thời gian tìm kiếm một định nghĩa style cụ thể.

Đây là một tổ chức mẫu mà bạn có thể sử dụng

Tổ chức code CSS

/*————————- 

 CSS Reset 

————————-*/  

  

/*————————- 

    Generic Classes 

————————-*/  

  

/*————————- 

    Layout styles 

————————-*/  

  

/*————————- 

    Section specific styles 

————————-*/

/*————————- 

 CSS Reset 

————————-*/  

  

/*————————- 

    Generic Classes 

————————-*/  

  

/*————————- 

    Layout styles 

————————-*/  

  

/*————————- 

    Section specific styles 

————————-*/


  1. Làm cho CSS dễ đọc hơn 

Viết CSS dễ đọc sẽ làm cho CSS dễ dàng được tìm kiếm và update các style trình bày sau này. Nhóm tất cả các style của một phần tử trong một dòng hay mỗi style trong dòng của nó với các thụt đầu dòng thích hợp. Bạn cũng có thể kết hợp 2 kỹ thuật này lại với nhau.

Làm cho CSS dễ đọc hơn

/*———————— 

  Each Style on new line 

   ———————*/  

div{   

   background-color:#3399cc;     

   color:#666;  

   font: 1.2em/1.4em ArialHelveticasans-serif;   

   height:300px;  

   margin:10px 5px;  

   padding:5px 0 10px 5px;  

   width:30%;  

   z-index:10;  

}  

  

/*———————— 

    All Styles on one line 

    ———————*/  

div{ background-

color:#3399cc; color:#666; font: 1.2em/1.4em ArialHelveticasans-serif;  height:300pxmargin:10px 5pxpadding:5px 0 10px 5pxwidth:30%; z-index:10; }  


  1. Thêm comments thích hợp

Comments có thể được sử dụng để tách các phần khác nhau của code CSS

Thêm comments

/*——————– 

    Header 

    —————–*/  

#header{ height:145px; position:relative; }  

#header h1{ width:324pxmargin:45px 0 0 20pxfloat:left;  height:72px;}  

  

/*——————– 

    Content 

    —————–*/  

#content{ background:#fff; width:650pxfloat:leftmin-height:600pxoverflow:hidden;}  

#content .posts{ overflow:hidden; }  

#content .recent{ margin-bottom:20pxborder-bottom:1px solid #f3f3f3position:relativeoverflow:hidden; }  

  

/*——————– 

    Footer 

    —————–*/  

#footerclear:both; padding:50px 5px 0; overflow:hidden;}  

#footer h4{ color:#b99d7ffont-family:ArialHelveticasans-seriffont-size:1.1em; } 


  1. Đặt thuộc tính CSS theo thứ tự chữ cái 

Điều này có thể là một cách khó khăn để viết CSS nhưng nó sẽ làm cho CSS của bạn dễ dàng tìm kiếm bất cứ dữ liệu nào ở những giai đoạn sau này

Đặt thuộc tính theo thứ tự chữ cái

div{   

background-color:#3399cc;     

color:  #666;  

font:   1.2em/1.4em Arial, Helvetica, sans-serif;   

height: 300px;  

margin: 10px 5px;  

padding:5px 0 10px 5px;  

width:  30%;  

z-index:10;  

  }


  1. Sử dụng Stylesheets bên ngoài

Nó luôn là cách thực hành thiết kế tốt để tách nội dung từ phần trình bày. Đặt tất cả code CSS của bạn trong stylesheet external và sử dụng <link> để tham chiếu đến stylesheet trong trang web. Bằng cách đặt CSS trong file external, bạn có thể update style sau này tại nơi này thay vì nhìn vào các [template] html hoặc file cho styles.

Không tốt

<style type=”text/css” >  

#container{ .. }  

#sidebar{ .. }  

</style>  

   

OR  

 <li style=”font-family:Arial, helvetica, sans-serif; color:#666; ” >


Tốt hơn

<link rel=“stylesheet” type=“text/css” href=“css/styles.css” />  

  1. Chia CSS thành nhiều file

Nguồn:  http://web.vivicorp.com/meo-viet-code-css.html

About the author

Mai Đông Giang

Tính thẳng thắn, sống tình cảm, làm việc hết mình.
Chia sẻ là nhận lại.