Tips on how to avoid issues/bugs with custom CSS in React JS (For beginners)

Hey guys!

I have been working on React JS for the past 2 years. Still, React JS amazes me with every new update's features. I have done 2 internships and currently working at Doc2Ship, as a Lead Front End Web Developer using React JS. However, React JS is considered hard for beginners due to its component-based structure.

I will be writing about issues and problems I faced in the start. Here are some of the CSS tips, I wish I had known at the start of development:-

When using React JS we create components and import these components in our main file(App.js usually). So if we name two CSS classes same of two different components same then, Then React JS will likely to apply CSS properties of first imported component to the 2nd one.

Let's say we have above two components "Requirements.js" and "ContactUs.js". So if we use following CSS classes, then you will have "Requirements.css" properties applied to the "ContactUs.js" file two.

• body class
• * class
• any tag class like div, img, li, span etc.
• same custom classes like "logoImage", "insta-Icon", or any other custom class but used in both component's CSS's file.

Reasons:-

• Never use body class, otherwise it will be apply this to other components body too.
• Never * class, unless you want to apply universal CSS.
• Usually all components use similar tags, So incase of using tags in ".css" files, The CSS will be applied to other component's tags too.
• Similar law applies to the same custom CSS classes when they are used in different component's ".css" files.

Solution:-

Always use different and unique classes for every component in order to avoid any type of design issue. Following are also good options for designing, when using React JS:-

• EmotionJS
• styled-components
• React bootstrap
• Material UI

We face similar issue to the above one when we use two or more CSS frameworks in a single project. Designing is considered one of the most difficult task for a Front End Developer. So if you are already using a CSS framework in your project, don't go for 2nd. Otherwise, you will be confused with the design behavior of your project.

Reason:-

The reason is CSS frameworks like Bootstrap, Material UI, or Tailwind CSS use similar classes for designing but mostly they have different behaviors for classes, or slightly different classes for same behaviors. This issue will confuse beginners, and they will end up giving up on React JS(Like me in the start😂).

Solution:-

Always use solo CSS framework as a beginner, specially when using React JS. This will help you design better than trying different classes for a single thing.

Tip:-

I personally prefer using Bootstrap, because it has following benefits:-

• Fully functional component code
• Easy to remember classes
• Uses Grid System for structure
• Lightweight and customizable
• Several JavaScript plugins using the jQuery

That's all for this Article, let me know if I have explained something wrong and I am open to constructive criticism.

Thank you 😊