Alternate Techniques for Styling in React
My focus for the past few weeks has been networking and strengthening some of my weaknesses as a fullstack engineer. The focus this week has been to learn more about how to use CSS successfully. In most of my projects, I have noticed CSS has taken a back seat. Whether it was using bootstrap/reactstrap (which I have another blog about) or trying to find templates to take the work out of styling, I have realized I haven’t focused enough on the fundamentals. I would like to touch on a bit of what I have picked up, I hope it is helpful for you.
The first technique I would like to touch base on is inline styling. This is generally used when you want to specifically style one div (similar to styling by div ID). You can do this right in the div with something like this:
As we can see, this is a way to style within the class. One other thing you may notice is the camel casing. If you are more comfortable with CSS, you would probably think you’d write in kebab-case. When styling within javascript, that is one of the changes to keep in mind.
Something else that can help you with an alternate form of styling is Javascript Object styling. With this technique, you can actually style your classes with a const. Here is an example:
This gives you the ability to get pretty detailed without having a blob of styling within the class.
I would recommend using a stylesheet for anything that you would like to apply a blanketed styling to. These are just alternate ways to style specific classes. The same can be done within a stylesheet. As always, happy coding and take care friends.
