Understanding reusable CSS style sheets
While building my portfolio, I decided that a single page React application would be my best bet. Additionally, I wanted a responsive website, something that looked good both on your desktop monitor and a phone screen. To my lack of surprise, there exist already, a bunch of tutorials and templates on the web for exactly what I’m trying to build.
I took one and ran with it. I restructured the website, updated the components to no longer render hard coded resume information, made a data file for my components to conditionally render, and the end result looked pretty good. Link to my portfolio here.
However, during the restructuring process, I noticed the organization of this project’s style sheets. Instead of importing individual style sheets per component or page, there were only 3 CSS files.
layout.css
This to me, was the classic css file. Its selectors contain body, #header, #about, #resume, #contact, etc. It’s divided into sections & at the top of the file, includes a index for improved file organization.
fonts.css
This style sheet manages the custom fonts that existed within the project. It provides the browser with font formats so a correct resource can be used.
more on @font-face here.
default.css
I think this is the most interesting css file of the three, and definitely one that has been reused. First, it resets all styling for every single tag type, then it creates a default style for all of them. (part c on the left picture.)
Next, it creates web responsiveness through the Grid portion. this part is separated into 5 sections.
default, max 767px, max 460px, and min 1200px,
for each screen width, what follows is a list of custom adjustments. (A big note on this, is that the creator of this style sheet uses class names like “text-right”, “text-left”, “columns”, “narrow”, etc. generic descriptive terms that allows for better reuse. In a way, like function names but for a style sheet. ) One example I’ll share, is the row class. I’ve created a div element with a class of “row” in a new index.html file & attached just the CSS dealing with the “row” class.
Although this doesn’t seem like much, with more selectors, this allows for responsiveness across multiple device types, and with this specific method of code organization, it’s possible to create custom style sheets that as a developer, one could use across multiple projects, akin to Material UI or Semantics.
I thought this was a great concept, so on my next project, I’ll start to build out my own version of the default.css page.
