Tại sao?
Vừa rồi mình có một pull request cho Ghost, trong đó chỉ thêm mỗi một dòng thuộc tính CSS display: inline; vào đoạn code có sẵn:
.post-view-link i {
font-size: 10px;
display: inline; /* thêm dòng này */
}
Chạy npm test thì nó báo fail đúng file vừa sửa, không biết tại sao? Đẩy code lên, tạo pull request vào Ghost repo, Travis-CI cũng báo fail đúng file đó!? Sau đó bác @acburdine comment rằng chỉ cần đổi vị trí 2 dòng trên là được:
"...switching the two lines in that one selector manually should also do it." View on Github
Lạ quá! Trước giờ mình gần như không bao giờ để ý thứ tự như thế này, dù thứ tự thế nào cũng không ảnh hưởng đến kết quả hiển thị chứ nhỉ?
Tìm hiểu
Sau một hồi thỉnh cao nhân Google, có nhiều ý kiến đưa ra, có người viết random, có người lại theo một thứ tự nào đó, nhưng tất cả có một điểm chung: thứ tự các thuộc tính CSS không hề ảnh hưởng đến việc hiển thị trên trình duyệt.
Ở đây phải nói rõ, ta chỉ xét đến những thuộc tính khác nhau, không phải những dạng viết tắt của một nhóm thuộc tính nào đó. Ví dụ:
p {
border-color: #00ff00;
border: 1px solid;
}
border là dạng viết gộp của một nhóm các thuộc tính về đường viền như border-width, border-style, border-color... Nếu như ví dụ trên, dòng border không có khai báo màu, lại đứng sau dòng border-color, nên kết quả thẻ p sẽ có màu viền mặc định là đen. Đổi vị trí 2 dòng này hẳn bạn cũng đoán ra kết quả. Ở đây rõ ràng vị trí quan trọng. Nhưng ta không xét trong bài này, mình chỉ nói cụ thể trường hợp này ra để các bạn không bị nhầm.
Có 2 cách phổ biến mà mọi người hay dùng:
- Theo thứ tự alphabet
- Theo nhóm
Ví dụ cho cách thứ 2:
{
display: ; /* Where and how the box is placed */
position: ;
float: ;
clear: ;
visibility: ; /* Can the box be seen? */
opacity: ;
z-index: ;
margin: ; /* Layers of the box model */
outline: ;
border: ;
background: ;
padding: ;
width: ; /* Content dimensions and scrollbars */
height: ;
overflow: ;
color: ; /* Text */
text: ;
font: ;
}
Nhóm thứ 3 trong đoạn code trên dựa vào Box Model Convention mà chắc là quen thuộc với các bạn:
Những cách xếp đặt như trên, hoặc khác đi, hoàn toàn không ảnh hưởng đến output hiển thị trên trình duyệt. Nhưng nếu phân chia code của bạn ra như thế này, hẳn là sẽ clear hơn, dễ đọc, dễ bảo trì. Và hẳn là Travis-CI cũng áp dụng một convention nào đó và buộc bạn phải tuân theo. Nó cũng giống như coding convention trong các ngôn ngữ lập trình bình thường, có thể nó không ảnh hưởng gì đến việc thực thi và kết quả đầu ra, nhưng lợi cho việc bảo trì sau này rất nhiều, nhìn code cũng đẹp hơn, thể hiện bạn là một coder chỉn chu hơn rất nhiều.
Tóm lại
Viết thuộc tính CSS theo thứ tự nào đi nữa cũng không ảnh hưởng đến kết quả đầu ra. Nhưng là những coder đẹp trai, đẹp gái, hội nhập, văn minh, chúng ta nên tập thói quen viết có convention.
Một convention hay để tham khảo: