Styling React Apps with Vanilla CSS

kouqhar answered on April 1, 2024 Popularity 3/10 Helpfulness 1/10

answer Styling React Apps with Vanilla CSS

Styling React Apps with Vanilla CSS

Comment

/* Styling React Apps with Vanilla CSS, Pros and Cons */

// First import the 'PATH-TO-CSS-FILE.css' to 'main.jsx'
 /* 
 	imports are not limited to main.jsx, imports can also be injected
 	into different pages e.g "./Header.css" into './Header.jsx'
    
    *** Mind the Hierarchy if one style rule precedes the other.
 */

	* React Code => // "./index.jsx"

		// ELEMENT
			<header></header>
		// CLASS
			<div className="class_container"></div>
		// ID
			<div id="id_container"></div>

	* Vanilla CSS Rules => // "./index.css"

		// ELEMENT
			header{}
		// CLASS
			.class_container{}
		// ID
			#id_container{}
    
 * Pros
	- Css code is decoupled form jsx code.
    - You write Css as you know.
    - Easy collaboration.

 * Cons
	- You need to know Css.
	- Css code is not SCOPED (so can clash across) to COMPONENTS.

// With love @kouqhar

Popularity 3/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: css javascript styling

Link to this answer
Share Copy Link

Contributed on Apr 01 2024

kouqhar

0 Answers Avg Quality 2/10

Styling React Apps with Vanilla CSS

Contents

More Related Answers

Styling React Apps with Vanilla CSS

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.