Một số kĩ thuật viết SCSS đảm bảo tính tái sử dụng, đóng gói và dễ maintain:
I. Một số "lỗi" thường gặp khi viết SCSS
a. 2 component có view giống y hệt nhau nhưng thực sự chúng là 2 component khác nhau và cần phải viết CSS riêng
=> Nhầm tưởng là một và dùng chung CSS
=> quá nhiều global css và sửa chỗ này hỏng chỗ khác
=> Giảm hiệu năng và khó maintain
b. 2 component giống nhau nhưng lại viết css riêng tại mỗi component
=> Lặp code
=> Khó maintain ( phải search để sửa nhiều chỗ khác nhau)
II. Một số cách để share scss
- Viết ở global css
- Viết ở module css, nơi mà các component dùng chung css
- Viết ở trong một share component mà component ấy được dùng nhiều lần
=> không thể dùng 1 cách để áp dụng cho mọi trường hợp, mà thực chất là kết hợp của các cách trên
III. Một số quy tắc viết SCSS để thỏa mãn nhiều tính chất
Khi viết mới CSS
- Cần nhận biết được tính chất mà component của mình viết sẽ share đến đâu
- Viết SCSS ở scope gần nhất mà nó cần dùng ( component > share in module > app style )
=> Đóng gói và tái sử dụng
- Đối với custom css, viết ở scope mà nó ảnh hưởng đến
- Chia file nhỏ cho từng css ở share scope
Khi tái sử dụng hoặc clone source
- Khi clone source cần nhận biết được component mới có tính chất giống hay khác component cũ mà sẽ copy hay share scss ra level cao hơn