23 | All features are done and coded by Joscript, please use this template 24 | with free mind, remember to subscribe and share our videos 25 |
26 |{testimonial.image}
116 |
33 | Stop worrying about perfecting
the shadows, just Copy &
34 | Paste
35 | from the 80+ Shadows collection
36 |
3D Games in Reactjs
86 | 89 |78 | Open to freelancing 79 |
80 |86 | contact@Joscriptbrown.dev 📧 87 |
88 | 89 |90 | JoscriptBrown.com 🌍 91 |
92 | 93 |96 | ReactJS 97 |
98 |99 | Git 100 |
101 |102 | NodeJS 103 |
104 |105 | Framer Motion 106 |
107 |
146 | The world of digital design and
development is constantly
147 | evolving and so
has my role over the last 7 years.{" "}
148 |
Adobe
187 |67 | TypeScript 68 |
69 | 70 | Sunday, July 22, 2023 71 |83 | One of the benefits of using TypeScript is that it significantly 84 | reduces the occurrence of specific bugs, like typos; it even makes 85 | it easier to access prototype methods and perform refactoring. Bugs 86 | caught at compile time make for more uptime, happier customers, and 87 | less on-call stress for developers. 88 |
89 | 90 |91 | With TypeScript, it’s easy to type our application’s business logic 92 | and control flows, but what if we could make our CSS classes safe 93 | too? Having the correct CSS class names in place ensures that the 94 | intended styles are applied to a given component, preventing the 95 | styles from being misplaced due to typography errors. 96 |
97 | 98 |99 | In this article, we’ll discuss what CSS Modules are, explore their 100 | developer experience shortcomings, and learn how to address them by 101 | using automation with TypeScript. Let’s get started! 102 |
103 | 104 |119 | CSS Modules provide an approach to writing modular and scoped CSS 120 | styles in modern web apps. These styles are specific to your 121 | application’s particular component or module. You can write CSS 122 | Modules by using regular CSS. 123 |
124 | 125 |126 | At build time, with Vite or other similar tools, the CSS Modules 127 | generate unique class names for each class defined in the CSS files. 128 | The generated class names are then used in JavaScript to refer to 129 | the CSS, thereby making the CSS modular and reusable without class 130 | name conflicts or unnecessary duplications. 131 |
132 | 133 |138 | If you want to use CSS Modules in your next TypeScript app, you have 139 | several options. Modern build tools like Vite and Snowpack support 140 | CSS Modules out of the box, but you may need to include some minor 141 | configurations if you’re using webpack. Once the build setup is 142 | done, you can add CSS files with the module.css extension following 143 | the CSS Modules convention: 144 |
145 | 146 |151 | CSS Modules are a great tool, but since class names are generated at 152 | runtime and change between builds, it’s hard to use them in a 153 | type-safe way. You could manually create types for each CSS Module 154 | using TypeScript definition files, but updating them is tedious. 155 | Let’s suppose that a class name is added or removed from the CSS 156 | Module. In that case, the types must be manually updated, otherwise, 157 | the type safety won’t work as expected. 158 |
159 | 160 |165 | In this case, the automation solution is straightforward. We’ll 166 | generate the types automatically instead of manually, and we’ll 167 | provide a script to verify that the generated types are up-to-date 168 | to avoid incorrect CSS Module typings leaking into the compilation 169 | step. 170 |
171 | 172 |175 | Working within the TypeScript ecosystem has great potential, but, 176 | when leaning too much on manual processes, it’s easy to blow trust 177 | in the type-system or generate unnecessary friction. CSS Modules are 178 | great, and with a little bit of extra configuration, its easy to add 179 | type safety to the generated classes. You should automate the boring 180 | stuff so that your team can focus on building a great products 181 | instead. I hope you enjoyed this article, and be sure to leave a 182 | comment below if you have questions. Happy coding! 183 |
184 |
35 | I design and code beautifully simple things, and
{" "}
36 | occasionally i write about them
37 |
201 | TypeScript 202 |
203 | 204 | Sunday, July 22, 2023 205 |