Sofiane BOUMEDINEblog.sofiane-boumedine.com·Apr 17, 2024Plongée dans le CSS-in-JS : pourquoi ça n'a pas collé avec Radix UI pour moiSalut, ami développeur ! Aujourd'hui, on va plonger dans le monde fascinant du CSS-in-JS, une pratique qui révolutionne le développement front-end. Prends un café, installe-toi confortablement, et prépare-toi à découvrir pourquoi cette méthode, surto...DiscussJavaScript
Rohit Singhrayan1810.hashnode.dev·Feb 23, 2024Re-thinking styling in build time with react-native-ustyle 😺Since react-native's initial launch in 2015, there have been numerous styling libraries built to simplify the styling of components by creating new stylable or as we call them styled-components. But what if I could extend my React Native Components t...Discuss·1 likebuild time
Catherine Anokwurucatihuoma.hashnode.dev·Jan 24, 2024Exploring Styling with Chakra UIChakra UI is a React component-based library that provides a set of accessible, reusable, and customizable components for building user interfaces. It was developed by Segun Adebayo. Chakra UI leverages Styled System to handle styling with Emotion se...Discuss·2 likes·53 readsstyled-components
Aniket Jhaaniketjha.dev·May 24, 2023Creating component variants with easeThere are times when you are writing your UI component and want to add style variants to it. A button component can be a "primary" button with a "blue" background or a "secondary" button with an "orange" background. If I asked you to create a button ...Discuss·47 readsclasses
Haidar Ezioheatseeker.hashnode.dev·Feb 28, 2023Top CSS-In-JS libraries, Comparedof course, this is in no way a full showcase of each library and its features, but a more high-level understanding of the syntax and big features all 4 libraries are good in their own way, and some work in certain situations better than others (in my...Discuss·4 likes·1.3K readsCSS in JSthank you. a lot of example make it easy to understand 3
Khadija Gwarzonaura.hashnode.dev·Sep 16, 2022How to Pass className to Styled-Components in ReactIn this article, we discuss how to use className with styled-components. Styled-components is a CSS in JS library, which allows you to write CSS styles in ES6 template literals. If you are not familiar with styled-components, you can learn the basics...Discuss·232 readsReact
Aniket Jhaaniketjha.dev·Aug 24, 2022Extending our CSS-in-JS to support style-component syntaxIn the previous post, we made our css emotion like function and in this blog post, we are going to extend our css function to support the following style-components syntax. const Button = styled('button')( { backgroundColor: "blue", color:...Discuss·156 readsCSSCSS
Aniket Jhaaniketjha.dev·Aug 14, 2022Build your own emotion like CSS-in-JS libraryIn this blog post, we will try to understand CSS-in-JS by creating our own version of emotion.js. Emotion is one of the most popular CSS-in-JS solutions out there. There are some brilliant minds working on emotion, we aren't going to recreate emotio...Discuss·218 readsCSSCSS
Aniket Jhaaniketjha.dev·Aug 13, 2022CSS: Isolation vs AbstractionTotal Isolation This comes as the result of the global nature of CSS where things are leaky and thus component-based UI architectures find it difficult as cascading and global CSS causes leaks in styles across the components. For example: <!-- Headi...Discuss·8 likes·172 readsCSSCSS
Aniket Jhaaniketjha.dev·Aug 12, 2022Why CSS-in-JS?Global and cascading nature of CSS CSS is global by design! It is that way because we want to bring consistency across the website. html { font-family: Roboto, sans-serif; } By writing the above code every text on your website has a font-famil...Discuss·21 likes·247 readsCSSCSS
