Cách viết CSS rút gọn!

Chúng ta đã biết ngày nay CSS ngày càng chiếm vai trò quan trong trong thiết kế, nhất là thiết kế giao diện! 
Do vậy ngoài cách bố trí hợp lý trên giao diện thì chúng ta cũng cần bố trí hợp lý trong code CSS sao cho ngắn gọn, dễ quản lý nhất!
Có thể cách này rất nhiều designer đã biết thậm chí là quá quen rồi nhưng mình vẫn mong muốn được chia sẻ với các bạn cách viết CSS sao cho ngắn gọn nhất mà vẫn đạt được hiệu quả như ý muốn! 

- Như thuộc tính margin, thường thì chúng ta sẽ viết đầy đủ như sau:

Trích dẫn

margin-top: 40px;
margin-right: 30px;
margin-bottom: 20px;
margin-left: 10px;

+ Nhưng như vậy thì hơi dài và hơn phí dung lượng file, do vậy mình có thể viết lại như sau:

Trích dẫn

margin: 40px 30px 20px 10px;

+ Ngắn hơn nhiều phải không? và hiệu quả cũng như cách trên! Với các thuộc tính padding các bạn cũng có thể làm tương tự. Và quy luật của nó như sau: 

Trích dẫn

Margin: top right bottom left.

- Ngoài ra các thuộc tính như border hay background các bạn cũng có thể rút gọn được:

Trích dẫn

border: 1px;
border-style: solid;
border-color: red;

Chúng ta có thể rút gọn lại như sau: 

Trích dẫn

border: 1px solid red;
hay như backround:
background: url no-repeat top fixed;

+ Nhìn gọn hơn khá nhiều đúng không?
Và các bạn cũng có thể kết hợp những thuộc tính tương tự nhau trên 1 hàng để mình dẽ quản lý. Ví dụ như thuộc tính Position các bạn có thể kết hợp luôn với top, right,...

Trích dẫn

vd: position: relative; top: 30px; right: 20px;..

Vậy qua đây mình hy vọng với chút kiến thức của mình chia sẻ lên đây mong các bạn chưa biết thì có thể biết được một chút thủ thuật làm cho file CSS của mình ngắn gọn hơn, sạch sẽ hơn, xúc tích hơn hay nói cách khác là PRO hơn!  Hì
- Chúc các bạn thành công và có thật nhiều trang web đẹp! 

Xem bài viết trên phiên bản di động