6 Tips quan trọng để viết CSS tốt hơn
Một trong những vấn đề nan giải nhất khi lập trình đó chính là quản lý, nâng cấp. Trên thực tế ta không phải lúc nào cũng sẽ bắt đầu phát triển một dự án từ con số 0 mà thường sẽ được giao hoặc đảm nhận một dự án đã được viết một vài năm trước hoặc lâu hơn. Để triển khai dự án đó hiệu quả, đầu tiên ta cần hiểu về code gốc xem nó có được viết khoa học, dễ hiểu hay không. Ta cần cố gắng viết CSS rõ ràng nhất có thể và tập trung khi viết.
Trong bài viết này, Bizfly Cloud sẽ giới thiệu một số tips quan trọng để viết CSS tốt hơn cũng như cải thiện chất lượng CSS của bạn.
Nào cùng tìm hiểu nhé!
Viết CSS ngắn gọn
Viết CSS ngắn gọn là biện pháp hữu hiệu để bạn có thể dễ dàng kiểm soát, theo dõi đoạn code của bạn và giúp nâng cao hiệu quả công việc, cũng hỗ trợ giảm số lượng ký tự trong file css đồng thời giảm kích thước file.
Ví dụ khi bạn muốn thiết lập thuộc tính padding cho 1 phần tử.
Có thể thao tác như sau:
.example { padding-top: 5px; padding-right: 10px; padding-left: 8px; padding-bottom: 10px; } |
Với cách viết như trên là không sai nhưng bị thừa và lặp lại. Bạn nên rút gọn như sau:
.example { padding: 5px 10px 10px 8px; } |
Cách viết CSS ngắn gọn như trên vẫn đúng mà lại giúp giảm kích thước file CSS mà còn giảm số lượng ký tự sử dụng. Tuy nhiên, có một điểm bạn cần lưu ý khi viết gộp lại như trên đó là các giá trị của thuộc tính đó sẽ lần lượt là top -> right -> bottom -> left. Bạn có thể viết ngắn gọn css với margin, font và border. Tham khảo thêm tại đây>>
Kết hợp CSS cho các phần tử
Khi bạn viết CSS nhiều lúc sẽ bị bỏ sót những phần tử ngang hàng, có thuộc tính giống nhau. Nhưng chúng lại phải viết đi viết lại dòng CSS và định nghĩa thuộc tính cho những phần tử đó.
Ví dụ:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } |
Khi đó, bạn có thể dựa vào thuộc tính giống nhau của chúng để kết hợp các phần tử với nhau như sau:
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; } |
Không sử dụng thiết lập toàn cầu
Bạn không nên phụ thuộc vào sử dụng thiết lập toàn cầu để lược bỏ những mặc định về margin và padding cho các phần tử HTML. Việc này làm giảm hiệu quả công việc và khiến việc viết CSS của bạn tệ hơn bởi vì mỗi khi cần bạn lại phải xác định margin và padding cho mỗi phần tử. Lúc này, các thiết lập CSS như của Eric Meyer là một thay thế phù hợp.
Ví dụ đoạn CSS dùng thiết lập toàn cầu:
margin: 0;
* {
padding: 0;
}
Trong trường hợp này, bạn nên thiết lập thuộc tính tương ứng cho phần tử HTML riêng biệt (thiết lập 1 file CSS Typography).
body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } |
Sử dụng CSS inheritance hiệu quả
Đối với các phần tử con của phần tử cha có cùng style trong một trang web thì bạn thường phải viết lại đoạn CSS như sau:
#example h1{ font-family: 'Roboto', sans-serif; } #example span{ font-family: 'Roboto', sans-serif; } #example p{ font-family: 'Roboto', sans-serif; } |
Cách viết CSS như trên tuy không sai nhưng có nhiều phần ký tự thừa, không cần thiết mà bạn có thể tận dụng CSS inheritance để tối ưu đoạn CSS của mình. Bạn sẽ định nghĩa thuộc tính cho phần tử cha và sử dụng CSS Inheritance để rút gọn CSS.
Cụ thể: Bạn định nghĩa 1 thuộc tính cho id #example thì những phần tử con gồm h1, span và p đều nhận được thuộc tính của phần tử cha là example.
#example { font-family: 'Roboto', sans-serif; } |
Kỹ thuật OOCSS
Kỹ thuật OOCSS tên đầy đủ là Object Oriented CSS, CSS hướng đối tượng được hiểu là bạn kết hợp các thuộc tính giống nhau của 2 class cùng áp dụng cho một phần tử thành một class để rút gọn và giảm sự trùng lặp khi viết CSS. Ví dụ:
Bạn khai báo 2 class cho button như sau:
.btn-primary { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn-success { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; color: #fff; background-color: #5cb85c; border-color: #5cb85c; } |
Để giảm sự trùng lặp do phải khai báo 2 class như trên bạn nên dùng 1 class chung ví dụ như .btn để định nghĩa các thuộc tính chung để áp dụng. Với các thuộc tính riêng không dùng OOCSS được thì bạn định nghĩa riêng cho các button còn lại.
.btn { display: inline-block; padding: 6px 12px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; border: 1px solid transparent; border-radius: 4px; } .btn.btn-primary { color: #fff; background-color: #337ab7; border-color: #2e6da4; } .btn.btn-success { color: #fff; background-color: #5cb85c; border-color: #5cb85c; } |
Như vậy, bạn có thể viết và quản lý css tốt hơn đồng thời tiết kiệm rất nhiều thời gian và công sức khi làm việc.
Thêm comment trong CSS
Đối với một 1 file CSS dài, tốt nhất bạn nên thêm comment trong từng phần của file đó. Việc này sẽ giúp ích cho bạn rất nhiều trong việc kiểm soát và quản lý file của bạn cũng như người khác dễ dàng theo dõi đoạn CSS mà bạn đã viết.
Ví dụ:
/*-------------------- Header -----------------*/ #header { height:145px; position:relative; } #header h1 { width:324px; margin:45px 0 0 20px; float:left; height:72px; } /*-------------------- Footer -----------------*/ #footer { clear:both; padding:50px 5px 0; overflow:hidden; } #footer h4 { color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.1em; } |
Tổng kết
Bài viết này đã giới thiệu tới bạn 6 mẹo để viết CSS tốt hơn. Các bạn hãy chia sẻ thêm những mẹo khác để chúng ta cùng viết CSS tốt hơn nhé.
Theo Bizfly Cloud chia sẻ
>> Có thể bạn quan tâm: Thủ thuật CSS và những mẹo hay dành cho developer
