Quy tắc Tổ chức Properties CSS dễ đọc, dễ hiểu

Nếu như HTML là cái khung quy định các element của 1 trang web thì CSS giúp hiển thị các element như ý muốn, giúp tạo ra giao diện trang đẹp hơn, bắt mắt hơn thu hút người truy cập. Với những dự án lớn, 1 element CSS (class, id, tag) có hàng tá các properties với những cách viết khác nhau lộn xộn sẽ làm cho người khác trong team khó đọc hiểu những dòng CSS, nên có những quy tắc chung trong việc viết các thuộc tính (properties) để dễ dàng đọc, dễ dàng refactor sau này.

.messy-class {
 font-size: 20px;
 margin-top: 50px;
 width: 100%;
 border-top-right-radius: 10px; 
 background-color: black;
 color: white;
 border: 2px solid lavender;
 font-weight: bold;
}

Nhìn vào CSS của class trên, để tìm 1 properties phải dò từ trên xuống dưới, chưa nói đến những đoạn dự án lớn chứa nhiều properties sắp xếp lộn xộn trong 1 group CSS. Đối với class trên, nên có cách viết đẹp hơn.

.organized-class {
 margin-top: 50px;

 width: 100%;
 border: 2px solid lavender;
 border-top-right-radius: 10px;
 
 color: white;
 background-color: black;
 
 font-size: 20px;
 font-weight: bold;
}

Đoạn CSS trên với class 'organized-class' được tổ chức khoa học lần lượt theo các nhóm Positioning, Display & Box Model, Color, Text, mỗi nhóm đã được xuống dòng phân cách cho các bạn dễ nhìn hơn. Với những đoạn CSS dài với chục thuộc tính trở lên thì việc xuống hàng phân cách ra như thế này là cần thiết.

.selector {
   /* Positioning */
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;

   /* Display & Box Model */
  display: inline-block;
  overflow: hidden;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 10px solid #333;
  margin: 10px;

   /* Color */
  background: #000;
  color: #fff
  
   /* Text */
  font-family: sans-serif;
  font-size: 16px;
  line-height: 1.4;
  text-align: right;

   /* Other */
  cursor: pointer;
}

Với cách trình bày khoa học và có tổ chức như trên giúp bạn dễ dàng đọc, dễ dàng hiểu đặc biệt khi nó không phải do bạn viết, tránh bị "gai mắt" nhé!

Quy tắc trên đã được khảo sát và confirmed, các bạn có thể xem thêm tại css-tricks

Hi vọng sau bài viết này thì các anh em front-end có thể viết những dòng CSS đẹp hơn, khoa học hơn.

Người viết: Minh Thắng