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

<div/>, <section/>, <header/>, <footer/>...

hiển thị: khối

<span/>, <a/>, <em/>, <b/>...

hiển thị: nội tuyến

<button/>, <label/>, <output/>...

hiển thị: khối nội tuyến

<img/>, <svg/>

căn dọc: giữa

<tóm tắt/>, [role="button"]

con trỏ: con trỏ;

<q/>

:trước {nội dung: trích dẫn mở}
:sau {nội dung: trích dẫn đóng}

...

...

Thẻ HTML

Điều này có vẻ hiển nhiên, nhưng cách đơn giản và nhất quán nhất để làm cho văn bản trông giống tiêu đề là sử dụng thẻ tiêu đề (<h1>, <h2>, ...). Bên cạnh các quy tắc khởi động lại, hầu hết tất cả các thẻ đều mang kiểu trang trí do SoOn xác định.

Example

Đừng

<span class="o_module_custom_title">
   Hello There!
</span>

<span class="o_module_custom_subtitle">
   I'm a subtitle.
</span>

LÀM

<h5 class="o_module_custom_title">
   Hello There!
</h5>

<div class="o_module_custom_subtitle">
   <b><small>I'm a subtitle.</small></b>
</div>

Ghi chú

Bên cạnh việc giảm số lượng mã, phương pháp thiết kế mô-đun (sử dụng lớp, thẻ, mixin...) giúp kết quả trực quan nhất quán và dễ dàng bảo trì.

Theo ví dụ trước, nếu thiết kế của tiêu đề SoOn thay đổi, những thay đổi này cũng sẽ được áp dụng trong phần tử o_module_custom_title vì nó sử dụng thẻ <h5>.

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"
/>