When I was first introduced to React and it’s components, I fell in love with them. I couldn't believe I didn't know about them or even anything like them until that point. Also to note, I'm an avid folders user in organizing my computer content, especially photos. So its understandable how excited I got when I found I could do the same for my code.
In case you don't know what components are... A good explanation is here on React docs on Components and Props. For me, I would describe components as good way to compartmentalize your code. I like to imagine components as Lego blocks or comparable to folders. Like building blocks or parts to use, reuse, and build off of as well as to organize. Although I think that the construction and utilization of components is nearly identical to that of functions.
One day, I thought to myself, “why don't I apply components to my CSS.” Although I was utilizing the components in React to reuse and compartmentalize my code, I still had an insanely long and convoluted CSS file. So, when I had this idea I thought I’d try it out with my next project. Which, considering how much I liked components and organizing stuff, I surprised myself with that it took me this long.
Since I was styling based on parts, my CSS file would be in segments based on those. Although my CSS file was somewhat organized, but despite this, I can bet that I am probably the only one that could understand it, and see where things were and what was going on.
To say the least, applying components to CSS was a great success. Not only could I compartmentalize and organize my styles, but also easily know which React components they were connected to because I also based my CSS components off of my React components.
It helped me the most where I styled a form. The project I tried using Css components on had four different submission forms and three different styles of those forms. I reused the CSS just as I would have for React components.
I started by creating one CSS component as a generalized or base style, which I mainly used to keep colors consistent, set direction flow, and to set the minimum size. After that I made new CSS components for each other different type of form. I had one form be a larger version and another be horizontal instead of vertical.
Since I had the generalized form CSS component, I didn't have to do much for the third type, where as the other 2 simply played off of the generalized style. I only changed the parts that needed to be different for the other two types of form styles, and everything else stayed the same which stayed in the base styles component. Not only did this all simplify my CSS code, but it also made it easier to look at and compare.
Although I could talk in more detail about this and how good it is, I will stop here. The main take away from all of this is that compartmentalizing code makes looking at and using code so much better, especially for reuse and comparison, and the best part is that its even better with CSS.
One last thing to note, I’ve referred to these as CSS components but it might be better to describe them closer to separated CSS files or folder-like CSS segments. React components are individual files that act like functions, but the CSS components here are individual files of ordinary CSS that I organized to match my React components. So I call them components based on how I synchronized them with my React components rather than by pure definition.
Top comments (0)