Styling in React

     Styling in React is as simple as CSS, which is basically all it is. You can create separate CSS files to hold your CSS, or you can use in-line styling. You can even put your CSS in your JavaScript files, which can sometimes be an excellent way to further isolate your code into components. My portfolio is a relatively small project, so I opted to put my styles in a separate CSS file, but I found some nice ways to organize it.

   

	.App {
	font-family: 'Raleway', sans-serif;
	color: #1D3557;
	background-image: linear-gradient(to bottom right, #F1FAEE 50%, #A8DADC);
	padding: 1em;
	min-height: 100vh;
	}
	.App a {
	color: #457B9D;
	}
	.App a:hover {
	color: #E63946;
	}
	.Header {
	width: 100%;
	border: 5px double #457B9D;
	margin-bottom: 1em;
	}
	td {
	letter-spacing: 2px;
	padding-left: 1em;
	padding-top: 0.25em;
	}
	.Navbar {
	background-color: #1D3557;
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	}
	.Navbar li {
	float: left;
	}
	.Navbar li a {
	display: block;
	color: white;
	text-align: center;
	padding: 14px 16px;
	text-decoration: none;
	}
	.Navbar li a:hover {
	background-color: #457B9D;
	color: white;
	}
	.ProjectList {
	margin: 2em;
	}
	.ProjectCard {
	margin-bottom: 0.5em;
	padding: 0em 0.5em 0em 0.5em;
	border: 1px double #A8DADC
	}
	.ProjectCard:hover {
	border-color: #E63946;
	}
	.SkillList {
	margin: 2em;
	}

view raw css_sample.css hosted with ❤ by GitHub

My CSS here is organized by component, with the class name being the name of the component. I indent each different element that will be affected to ensure similar things are with similar things. Outside of the organization, the CSS isn't anything too special. Inline styles are not recommended in general, since they can make your code more difficult to read. All of this CSS makes my front page look like this:

    If you want to check out the code, it's here.