نوشتن CSS سبک و قابل نگهداری

روش‌های زیادی برای کاهش حجم و ساده‌سازی SCSS وجود دارد. اولین گام تعیین این است که آیا اصلاً نیازی به کد سفارشی هست یا خیر.

وب‌کلاینت Odoo به‌گونه‌ای طراحی شده که ماژولار باشد، به این معنی که (به‌طور بالقوه همهٔ) کلاس‌ها می‌توانند بین نماها به اشتراک گذاشته شوند. قبل از ایجاد یک کلاس جدید، کد را بررسی کنید. احتمال دارد کلاس یا تگ HTMLی وجود داشته باشد که دقیقاً همان کاری را که می‌خواهید انجام می‌دهد.

علاوه بر این، Odoo بر Bootstrap (BS) تکیه دارد که یکی از کامل‌ترین فریم‌ورک‌های CSS موجود است. این فریم‌ورک به‌گونه‌ای سفارشی شده که با طراحی Odoo (هر دو نسخهٔ community و enterprise) مطابقت داشته باشد، به این معنی که می‌توانید هر کلاس BS را به‌طور مستقیم در Odoo استفاده کنید و به نتیجهٔ بصری‌ای برسید که با UI ما همسان است.

هشدار

• این که یک کلاس به نتیجهٔ بصری دلخواه می‌رسد، الزاماً به این معنی نیست که کلاس مناسب برای آن کار است. مثلاً مراقب کلاس‌هایی که رفتارهای JS را فعال می‌کنند، باشید.

• مراقب معناشناسی کلاس‌ها باشید. اعمال یک کلاس دکمه بر یک عنوان نه‌تنها از نظر معنایی نادرست است، بلکه ممکن است به مشکلات مهاجرت و ناسازگاری بصری منجر شود.

بخش‌های زیر نکاتی برای کاهش خطوط SCSS را توصیف می‌کنند زمانی که کد سفارشی تنها راه ممکن است.

پیش‌فرض‌های مرورگر

به‌صورت پیش‌فرض، هر مرورگر محتوا را با استفاده از یک user agent stylesheet رندر می‌کند. برای غلبه بر ناسازگاری‌ها بین مرورگرها، برخی از این قوانین توسط Bootstrap Reboot بازنویسی می‌شوند.

در این مرحله تمام قوانین «دکوراسیون خاص مرورگر» حذف شده‌اند، اما بخش بزرگی از قوانین تعریف اطلاعات پایهٔ چیدمان حفظ می‌شود (یا به دلایل سازگاری توسط Reboot تقویت می‌شود).

می‌توانید به این قوانین تکیه کنید.

Example

اعمال display: block; به یک <div/> معمولاً ضروری نیست.

div.element {
   display: block;
   /* not needed 99% of the time */
}

Example

در این مورد، می‌توانید به‌جای افزودن یک قانون CSS جدید، تگ HTML را تغییر دهید.

span.element {
   display: block;
   /* replace <span> with <div> instead
      to get 'display: block' by default */
}

در اینجا فهرستی ناقص از قوانین پیش‌فرض ارائه می‌شود:

تگ / ویژگی	پیش‌فرض‌ها
<div/>، <section/>، <header/>، <footer/>...	display: block
<span/>، <a/>، <em/>، <b/>...	display: inline
<button/>، <label/>، <output/>...	display: inline-block
<img/>، <svg/>	vertical-align: middle
<summary/>، [role="button"]	cursor: pointer;
<q/>	:before {content: open-quote} :after  {content: close-quote}
...	...

همچنین ببینید

Bootstrap Reboot on GitHub

تگ‌های HTML

ممکن است بدیهی به نظر برسد، اما ساده‌ترین و سازگارترین راه برای ظاهر کردن متن به‌صورت یک عنوان، استفاده از یک تگ هدر (<h1>، <h2>، ...) است. علاوه بر قوانین reboot، تقریباً همهٔ تگ‌ها سبک‌های دکوراتیو تعریف‌شده توسط Odoo را حمل می‌کنند.

Example

نکنید

XMLSCSS

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

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

بکنید

XMLSCSS

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

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

توجه

علاوه بر کاهش حجم کد، رویکرد طراحی ماژولار (استفاده از کلاس‌ها، تگ‌ها، mixinها...) نتیجهٔ بصری را سازگار و به‌سادگی قابل نگهداری می‌کند.

با پیروی از مثال آخر، اگر طراحی عناوین Odoo تغییر کند، این تغییرات نیز در عنصر o_module_custom_title اعمال خواهند شد، زیرا از تگ <h5> استفاده می‌کند.

کلاس‌های utility

فریم‌ورک ما کلاس‌های utility متعددی را تعریف می‌کند که برای پوشش تقریباً همهٔ نیازهای چیدمان/طراحی/تعامل طراحی شده‌اند. حقیقت سادهٔ این که یک کلاس از قبل وجود دارد، استفاده از آن به‌جای CSS سفارشی را هرگاه ممکن است توجیه می‌کند.

مثال position-relative را در نظر بگیرید.

position-relative {
   position: relative !important;
}

از آنجا که یک کلاس utility تعریف شده است، هر خط CSS با اعلان position: relative به‌طور بالقوه اضافی است.

Odoo بر پشتهٔ پیش‌فرض کلاس‌های utility Bootstrap تکیه می‌کند و کلاس‌های utility خود را با استفاده از API Bootstrap تعریف می‌کند.

همچنین ببینید

• کلاس‌های utility Bootstrap

• utilityهای سفارشی Odoo در github

مدیریت پُرگویی کلاس‌های utility

نقطه‌ضعف کلاس‌های utility، فقدان احتمالی خوانایی است.

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

برای غلبه بر این مشکل، می‌توانید رویکردهای مختلف را ترکیب کنید:

• در ویژگی‌های Qweb، تنها از کلاس‌هایی استفاده کنید که بلادرنگ قابل تغییر هستند؛

• برای هر ویژگی، از خط جدید استفاده کنید؛

• کلاس‌ها را با استفاده از قاعدهٔ [odoo component] [bootstrap component] [css declaration order] مرتب کنید.

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

همچنین ببینید

ترتیب ویژگی‌های CSS Odoo