Viết CSS gọn gàng dễ bảo trì¶
Có nhiều cách để tinh gọn và đơn giản hóa SCSS. Bước đầu tiên là thiết lập xem có cần mã tùy chỉnh hay không.
Webclient của SoOn đã được thiết kế theo mô-đun, nghĩa là (có thể là tất cả) các lớp có thể được chia sẻ giữa các chế độ xem. Kiểm tra mã trước khi tạo một lớp mới. Rất có thể đã có một lớp hoặc thẻ HTML thực hiện chính xác những gì bạn đang tìm kiếm.
Trên hết, SoOn dựa vào Bootstrap (BS), một trong những khung CSS hoàn chỉnh nhất hiện có. Khung này đã được tùy chỉnh để phù hợp với thiết kế của SoOn (cả phiên bản cộng đồng và doanh nghiệp), nghĩa là bạn có thể sử dụng bất kỳ lớp BS nào trực tiếp trong SoOn và đạt được kết quả trực quan phù hợp với giao diện người dùng của chúng tôi.
Cảnh báo
Việc một lớp học đạt được kết quả trực quan như mong muốn không nhất thiết có nghĩa là lớp học đó phù hợp với công việc. Ví dụ: hãy nhận biết các lớp kích hoạt hành vi JS.
Hãy cẩn thận về ngữ nghĩa lớp học. Việc áp dụng lớp nút cho tiêu đề không chỉ sai về mặt ngữ nghĩa mà còn có thể dẫn đến các vấn đề di chuyển và sự không nhất quán về hình ảnh.
Các phần sau đây mô tả các mẹo để loại bỏ các dòng SCSS khi mã tùy chỉnh là cách duy nhất.
Mặc định của trình duyệt¶
Theo mặc định, mỗi trình duyệt hiển thị nội dung bằng cách sử dụng biểu định kiểu tác nhân người dùng. Để khắc phục sự không nhất quán giữa các trình duyệt, một số quy tắc này bị ghi đè bởi Bootstrap Reboot.
Ở giai đoạn này, tất cả các quy tắc "trang trí dành riêng cho trình duyệt" đã bị loại bỏ nhưng một lượng lớn quy tắc xác định thông tin bố cục cơ bản vẫn được duy trì (hoặc được củng cố bằng Khởi động lại vì lý do nhất quán).
Bạn có thể dựa vào những quy tắc này.
Example
Việc áp dụng display: block;
cho <div/>
thường là không cần thiết.
div.element {
display: block;
/* not needed 99% of the time */
}
Example
Trong trường hợp này, bạn có thể chọn chuyển đổi thẻ HTML thay vì thêm quy tắc CSS mới.
span.element {
display: block;
/* replace <span> with <div> instead
to get 'display: block' by default */
}
Đây là danh sách không đầy đủ các quy tắc mặc định:
Thẻ/Thuộc tính |
Mặc định |
---|---|
|
|
|
|
|
|
|
|
|
|
|
:trước {nội dung: trích dẫn mở} :sau {nội dung: trích dẫn đóng} |
... |
... |
Các lớp tiện ích¶
Khung công tác của chúng tôi xác định vô số lớp tiện ích được thiết kế để đáp ứng hầu hết mọi nhu cầu về bố cục/thiết kế/tương tác. Thực tế đơn giản là một lớp đã tồn tại chứng minh việc sử dụng nó thay vì CSS tùy chỉnh bất cứ khi nào có thể.
Lấy ví dụ về vị trí-tương đối
.
position-relative {
position: relative !important;
}
Vì một lớp tiện ích đã được xác định nên bất kỳ dòng CSS nào có khai báo vị trí: tương đối
đều có khả năng dư thừa.
SoOn dựa vào ngăn xếp ``Các lớp tiện ích Bootstrap <https://getbootstrap.com/docs/5.1/utilities/background/>`_ mặc định và xác định lớp riêng của nó bằng cách sử dụng Bootstrap API.
Xử lý mức độ chi tiết của các lớp tiện ích¶
Nhược điểm của các lớp tiện ích là khả năng thiếu khả năng đọc.
Example
<myComponent t-attf-class="d-flex border px-lg-2 card
{{props.readonly ? 'o_myComponent_disabled' : ''}}
card d-lg-block position-absolute {{props.active ?
'o_myComponent_active' : ''}} myComponent px-3"/>
Để khắc phục sự cố, bạn có thể kết hợp các phương pháp khác nhau:
trong thuộc tính Qweb, chỉ sử dụng các lớp được chuyển đổi nhanh chóng;
sử dụng dòng mới cho từng thuộc tính;
sắp xếp các lớp bằng cách sử dụng quy ước
[thành phần odoo] [thành phần bootstrap] [thứ tự khai báo css]
.
Example
<myComponent
t-att-class="{
o_myComponent_disabled: props.readonly,
o_myComponent_active: props.active
}"
class="myComponent card position-absolute d-flex d-lg-block border px-3 px-lg-2"
/>
Xem thêm