𝗧𝗵𝗲 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗕𝗲𝘁𝘄𝗲𝗲𝗻 𝗖𝗦𝗦 𝗶𝗻 𝗧𝗦 𝗧𝗼𝗼𝗹𝗸𝗶𝗍𝘀

𝗧𝗵𝗲 𝗗𝗶𝗳𝗳𝗲𝗿𝗲𝗻𝗰𝗲 𝗕𝗲𝘁𝘄𝗲𝗲𝗻 𝗖𝗦𝗦-𝗶𝗻-𝗧𝗦 𝗧𝗼𝗼𝗹𝗸𝗶𝗍𝘀 You want your project resources to have a predictable API. This is why you need to check if you are using the correct selectors in your components when using CSS styles. CSS-in-TS seems like the perfect tool for control and performance improvement. But it is not just one tool - it is an entire ideology with various shades of implementation. Here are 3 different CSS-in-TS tools:

• CSS Modules: allows you to write styles in CSS files and isolates those files to prevent naming conflicts
• vanilla-extract: suggests describing styles directly in TypeScript files
• EffCSS: generates styles using StyleSheet maker functions and suggests explicitly declaring a function type Each tool has its own usage scenario. They all achieve the same result - TypeScript autocomplete - but their dependencies and initial conditions differ. You can use existing CSS, base your styles on CSS-in-JS, or start with TypeScript types. Choose a library that will require less effort to integrate into your project. Source: https://dev.to/effnd/different-shades-of-css-in-ts-4dcn