Micro-frontendVì CSS mặc định là global, style của một mảnh dễ rò rỉ và ghi đè mảnh khác ngoài ý muốn.
- Các cách tách biệt: đặt tiền tố/quy ước BEM cho class, dùng CSS Modules (hash tên class), CSS-in-JS (scope theo component), hoặc Shadow DOM (tách biệt mạnh nhất — style không lọt ra/vào).
- Trong thực tế nên kết hợp một design system dùng chung (để UI nhất quán) với một cơ chế scoping (để không xung đột).
- Lưu ý: Shadow DOM tách biệt tuyệt đối nhưng cũng chặn cả style/theme dùng chung lọt vào, nên chia sẻ design token và đổi theme sẽ khó hơn — cân nhắc đánh đổi giữa tách biệt và khả năng đồng bộ giao diện.
Because CSS is global by default, one piece's styles easily leak and override another unintentionally.
- Isolation options: class prefixes / BEM conventions, CSS Modules (hashed class names), CSS-in-JS (component-scoped), or Shadow DOM (strongest isolation — styles can't leak in or out).
- In practice, combine a shared design system (for consistent UI) with a scoping mechanism (to avoid conflicts).
- Note: Shadow DOM isolates completely but also blocks shared styles/themes from getting in, making design-token sharing and theming harder — weigh the trade-off between isolation and the ability to keep the UI in sync.