Những cách trình bày CSS

• November 10, 2009
• 12 comments

Trong bài này chúng ta sẽ không bàn đến những tính năng thông thường của CSS mà trong bài này chúng ta sẽ xem xét đến những cách trình bày code CSS. Có rất nhiều cách bạn có thể chọn để trình bày trong CSS, nhưng chọn ra cách nào phù hợp với mình và luôn sử dụng nó là tốt nhất.

Như bạn biết code CSS không kể khoảng trắng cho nên bạn có thể trình bày nó như thế nào tùy thích, ví dụ khi bạn viết:

#nav       {       list-style:          none;            }

Thì cũng tương đương như khi bạn viết:

#nav {list-style: none;}

Chính vì thế người ta mới có nhiều cách để trình bày code CSS sao cho dễ nhìn và dễ đọc hơn. Tôi phải nói trước rằng không có cách nào là cách tốt nhất mà chỉ có cách phù hợp với bạn nhất. Những cách trình bày sau đây được cho là phổ biến nhưng nếu bạn thấy cách nào phù hợp với mình nhất thì bạn có thể chọn và luôn sử dụng nó

Cách 1: Nhiều hàng

Cách này là cách tôi hay sử dụng trong các tutorial mà bạn thấy trong video. Theo tôi thấy thì cách này là phù hợp với tôi nhất bởi vì nếu cần chỉnh sửa code CSS sau này, bạn chỉ việc tìm đến Selector và các Attribute của nó ở ngay bên dưới và riêng ra từng dòng. Nhưng mặt hạn chế của nó là làm cho code CSS của bạn dài hơn và “nặng” hơn.

#header {
	height: 310px;
	background: transparent url(images/head.jpg) no-repeat top center;
}
#header h1 a{
	display: block;
	width: 376px; height: 47px;
	text-indent: -99999px;
	float: left;
	margin: 210px 0px 0px 10px;
	background: url(images/logo.png) no-repeat left top;
}
#header #mainNav {
	height: 35px; line-height: 35px;
	position: relative;
	border-top:  1px solid #89cce1;
	border-bottom:  1px solid #89cce1;
	margin: 17px 0px 20px 0px;
	background: #cde9f2;
}

Cách 2: Selector và Attribute chung một hàng

#header { height: 310px; background: transparent url(images/head.jpg) no-repeat top center;}
#header h1 a {display: block; width: 376px; height: 47px; text-indent: -99999px; float: left;margin: 210px 0px 0px 10px;
	background: url(images/logo.png) no-repeat left top;}
#header #mainNav {height: 35px; line-height: 35px; 	position: relative;	border-top:  1px solid #89cce1;border-bottom:  1px solid #89cce1;margin: 17px 0px 20px 0px;background: #cde9f2;}

Thì như bạn thấy, cách thứ 2 tiết kiệm được chiều dọc, nhưng có vẻ khó đọc hơn và nhìn như ma trận.

Cách 3: Một hàng với Tab

#header                     { height: 310px; background: transparent url(images/head.jpg) no-repeat top center;}
#header h1 a              {display: block; width: 376px; height: 47px; text-indent: -99999px;
                                  float: left;margin: 210px 0px 0px 10px;
	                          background: url(images/logo.png) no-repeat left top;}
#header #mainNav       {height: 35px; line-height: 35px; position: relative;
                                  border-top:  1px solid #89cce1;border-bottom:  1px solid #89cce1;margin:
                                 17px 0px 20px 0px;background: #cde9f2;}

Cách trình bày thế này thì cũng dễ đọc hơn và khi chỉnh sửa bạn cũng tìm thấy Selector dễ hơn vì bạn không phải kéo chuột miên man mệt mỏi (sao nhiều “mờ” thế nhỉ)

Cách 4: Nhiều hàng với thụt đầu dòng

#header #mainNav {
	height: 35px; line-height: 35px;
	position: relative;
	border-top:  1px solid #89cce1;
	border-bottom:  1px solid #89cce1;
	margin: 17px 0px 20px 0px;
	background: #cde9f2;
       }
       #mainNav ul li {
	                    display: inline;
                          }
                         #mainNav ul li a {
	                                        color: #7dc4db;
	                                        font-weight: bold;
	                                        padding: 0px 5px 0px 10px;
	                                       }
                                               #mainNav ul li a:hover {
	                                       text-decoration: underline;
                                               }
#mainNav img.support {
	position: absolute;
	top: -6px; right: 0;
}

Cách trình bày thế này cũng tốn chiều dọc, nhưng giúp bạn biết được thành phần nào là con thành phần nào bằng trực giác. Tuy bạn có thể đọc code để biết được, nhưng đôi khi trực giác cũng rất tốt để bao quát vấn đề

Cách 5: Sử dụng kết hợp

Đây cũng là biện pháp tôi sử dụng cho những trang có quá nhiều code CSS. Như nói ở trên tôi thích nhất cách nhiều hàng, nhưng nếu nó dài quá thì nên kết hợp lại. Tôi thường kết hợp các thành phần liên quan đến nhau như sau:

div#containter {
     width: 300px; height: 400px;
     margin: 0px 0px 10px 15p; padding: 4px 5px;
     font-size: 12px; font-family: arial, sans-serif; color: blue;
     background: #456423;
}

Như bạn thấy tôi kết hợp độ rộng với chiều cao, Margin với Padding và các giá trị liên quan đến font vào một hàng. Như thế cũng tiết kiệm được chiều dài của code

Kết Luận:

Như đã nói, không có cách nào là cách tốt nhất mà chỉ có cách phù hợp nhất. Do vậy, bạn cứ chọn cho mình một cách và sau đó sử dụng nó toàn bộ trong quá trình code của mình. Nhưng dù gì đi chăng nữa, để có code CSS dễ đọc, dễ hiểu và dễ chỉnh sửa sau này hoặc làm việc theo nhóm. Bạn rất cần trình bày sao cho ngăn nắp, gọn gàng và mạch lạc. Đây chính là điểm khác biệt giữa một coder giỏi và một coder xuất sắc.