CODE CSS: Sắp xếp các thuộc tính CSS sao cho gọn, đẹp, và dễ bảo trì.

Chào mọi người, hôm nay mình sẽ chia sẻ với các bạn một mẹo nhỏ về CSS mà mình đã tìm hiểu và thấy nó khá là hữu ích trong việc tổ chức code Css gọn gàng, đẹp, và dễ hiểu. Sau này khi cần bảo trì thì việc tìm các thuộc tính sẽ trở nên nhanh hơn và giúp các bạn tiết kiệm thời gian hơn. Ok, mình cùng bắt đầu vào nội dung chính của bài viết luôn haaaaa.

Dưới đây là một đoạn code mình dùng để style cho button trong project bài tập cuối khóa HTML-CSS của anh Sơn. Nhìn trông khá lộn xộn đúng không các bạn?

Khi bạn đọc đoạn code button này của mình bạn hông biết là cái ông này ổng dùng display gì cho button vậy ta? bạn sẽ mò từ trên xuống dưới để tìm thuộc tính display, đến khi có rồi thì bạn dừng lại, và biết là ổng dùng display: flex;

Tiếp tục, bạn tự hỏi ông này ổng canh giữa kiểu gì vậy nhỉ? Bạn sẽ mò từ trên xuống dưới và thấy 2 thuộc tính justify-content: center và align-items: center.

Một khi bạn muốn tìm cái gì đó thì hầu như bạn phải scan hết cái đống code này. Mà đây chỉ là 1 đoạn code trong một rừng code của mình thôi :v

Ứng với những dòng code đó mình viết lại như sau:

Giả sử, bây giờ bạn muốn tìm color của button, bạn chỉ cần đọc các dòng chú thích là bạn sẽ tìm thấy color ở dòng 21, 22. Hi vọng các bạn tia chú thích như cách bạn tia gái vậy. Khi bạn đã thấy color rồi thì bạn có thể skip qua các thuộc tính khác, tại nó không liên quan tới màu sắc.

Tương tự, nếu bạn đang tìm hiểu display, bạn chỉ cần xem block đầu tiên, bỏ qua các thằng khác, chả quan tâm. Liên quan tới thằng display: flex; ta có thêm justify-content: center và align-items: center cũng nằm chung một block.

Vì display và box-model nó khá là nhiều thuộc tính nên mình chia ra từng block nhỏ khoảng 3-5 dòng, và xếp nó vào những block liên quan với nhau giúp cho việc đọc code trở nên dễ dàng và nhanh chóng hơn.

Những lần sau, khi bạn xem lại code hoặc bảo trì thì việc tổ chức cấu trúc code như thế này giúp bạn tiết kiệm rất nhiều thời gian để bạn chỉnh sửa hoặc fix bug.

Đây là một phương pháp rất là hay mà mình đã đọc được trên CSS-Tricks khảo sát 10.000 người về việc nên gom nhóm CSS như thế nào?

Kết quả cho thấy 45% chọn cách gom nhóm theo loại chức năng. Thì có 5 nhóm đó là: Positioning, Display & Box model, Color, Text và Other (animation, cursor,...).

Chỉ cần áp dụng vài lần và trở thành thói quen thì code của bạn sẽ trở rất là đẹp, rất là gọn và giúp tiết kiệm thời gian cho những lần sau. Bởi vì khi lần đầu tiên mà bạn viết code thì bạn có thể sẽ nhớ được, tuy nhiên 1 tuần sau bạn quay lại xem chính code của mình viết ra thì bạn sẽ khóc ròng 1 dòng sông luôn. Đặc biệt là những người khác đọc code của bạn thì họ còn khóc bạo hơn nữa.

Hiện tại có thể bạn chưa thấy hậu quả nhưng mai mốt bạn sẽ thấy liền thôi ha =)). Cho nên hãy thử áp dụng thử một thời gian ha. Cảm ơn mọi người đã tốn thời gian đọc tới dòng này :).

Nguồn: https://css-tricks.com/poll-results-how-do-you-order-your-css-properties/