Các cách sắp đặt code CSS , chọn lựa phương pháp sắp xếp phù hợp

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

Các cách sắp đặt code CSS

>> Xem thêm: Lý do bạn cần phải gắn domain cho website của mình

Cách 1: Nhiều hàng

Cách thức này là cách tôi hay sử dụng trong các tutorials mà bạn thấy trong video. Theo tôi thấy thì phương pháp này là phù hợp với tôi nhất 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à mặt hạn chế của nó là khiến cho code CSS của bạn dài hơn và “nặng” hơn.

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

Cách sắp đặt 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 mà thỉnh thoảng trực quan cũng rất tốt để bao quát vấn đề.
 

Những phương pháp sắp đặt code CSS

Cách 3: Dùng phối hợp

Đây cũng là giải pháp tôi sử dụng cho những page có quá nhiều code CSS. Như nói ở trên tôi thích nhất phương pháp nhiều hàng, nhưng mà 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 can đến nhau như sau:
 

Cách sắp đặt code CSS phù hợp
 

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

Kết Luận

Như đã nói, không có phương pháp nào là cách hoàn hảo nhất mà chỉ có cách phù hợp nhất. Bởi vậy, bạn cứ chọn cho mình một cách thức và sau đó sử dụng nó hoàn toàn trong hành trình code của mình. Nhưng mà 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 cần sắp đặt sao cho gọn gàng và mạch lạc. Đây chính là điểm không giống nhau giữa một coder giỏi và một coder xuất sắc.

Tags: 2 thẻ div trên 1 dòng, clearfix css, so sánh các thuật toán sắp xếp, clearfix trong css, thiết kế website bằng html và css, clearfix bootstrap 3, thẻ div chồng lên nhau, tạo giao diện web đơn giản bằng html và css