CSS Guideline
Base on RSCSS
การตั้งชื่อ Module
ขึ้นต้นด้วยคำว่า module- ตามด้วยชื่อ module ตามด้วย -method -para เช่น module-project -develop -plan
- โมดูลโครงการ .module-project
- โมดูลเยี่ยมบ้าน .module-imed
การตั้งชื่อ components
แต่ละ component จะตั้งชื่อโดยใช้ อย่างน้อยสองคำ แยกกันด้วยขีดกลาง ตัวอย่างเช่น
- ฟอร์ม (.form)
- ปุ่มไลค์ (.like-button)
- กล่องค้นหา (.search-form)
- การ์ดบทความ (.article-card)
การตั้งชื่อ elements
Element ไหนที่อยู่ภายใต้ component ชื่อของ class ควรมีเพียง หนึ่งคำ ถ้าต้องใช้หลายคำ สำหรับชื่อ class ที่ต้องยาวสองคำหรือมากกว่า ให้เอาคำมาต่อกันเลย โดยไม่ต้องมีเส้นกลางหรือเส้นใต้
.search-form {
> .field { /* ... */ }
> .action { /* ... */ }
}
การตั้งชื่อ variants
ชื่อ class ของ variants ให้ขึ้นต้นด้วยขีดกลาง (-).
.like-button {
&.-wide { /* ... */ }
&.-short { /* ... */ }
&.-disabled { /* ... */ }
}
โครงสร้างของ html,class
<html> <head> </head> <body id="modulename" class="module-modulename -method -para -hostname-TLD"> <div id="page-wrapper" class="page -page"> <div id="header-wrapper" class="page -header"> </div> <div id="content-wrapper" class="page -content"> <div id="primary" class="page -primary"> <div id="main" class="page -main"> </div> </div> <div id="secondary" class="page -secondary"> </div> </div> </div> <div id="footer-wrapper" class="page -footer"> </div> </body> </html>
