5 Tips to Start Organizing My CSS

Designed by Mike Mangialardi

What you’re getting into: A short, 5 min read on some helpful tips on how I am starting to organize my CSS. Depending on your skill level, this may be really obvious or a huge help. Either way, hopefully, there is something you can take away no matter skill level.

Affiliate Links/Sponsors: Nada.

Ways to Provide Feedback: Drop helpful tips I may not have covered in the comments.


If there is anything that I have learned recently, it is that organization makes a huge difference. This past year I finally rebounded from a post-graduation slump of not being able to land a developer job and lost confidence in my skill-set. A big step in my turnaround was to get organized.

I created a new Gmail account and made sure to add plenty of labels so it stayed clean. I started using Evernote to track websites and passwords I frequently used. I launched a massive audit on the files on my Macbook and organized my file hierarchy.

These may sound like tasks that have nothing to do with turning around my slump, but it was incredibly impactful to go on my Macbook and not feel cluttered when I was already combatting stress. By making simple steps to focus on organization, there was a sense of freshness and relief that was one step in boosting my confidence.

My point beyond this brief anecdote is to highlight the impact of organizing what can often become cluttered. Front-end development is no exception. The larger the projects you undertake, the greater the impact organizing your code can have.

In this article, I will be laying out 5 tips I have recently started implementing to organize my CSS.

Organized UI Color Palette

Having skills in vector illustration, I am always paying particular attention to using colors that pair well together and make sense for UX. My issue has been that I sort of grab colors from Dribbble inspiration and check the results in a trial and error type fashion.

Now, I am trying to select a color palette before I begin to code.

Here is how I am dividing up my color palette:

  1. Primary: branding color
  2. Accent: emphasize action and highlight information
  3. Success: highlight a success to user
  4. Error: highlight an error to user
  5. Warning: highlight a warning to user
  6. Neutrals: text and container, changing opacity for variance

The main benefits of organizing my color palette in this fashion is an increased reflection on user experience and allowing for organized SCSS color variables (which I will describe in the next section).

Tools:

CSS Pepper: Get access to the useful CSS styles on any web page with one click with this Chrome extension.

Dribbble: Dribble is a show and tell for designers. As I mentioned early, I use Dribbble a ton to gather a color palette ideas.

UI Color System: I recently created a desktop tool where you can test all the divisions of a color palette and see a live update.

SCSS Color Variables

By having UI colors picked and organized beforehand, you can use SCSS variables that correspond to each color as can be seen below:

//Color Palette Variables
$primary: #50E3C2;
$accent: #8C88FF;
$success: #7FD323;
$error: #FF3366;
$warning: #FFD806;
$neutral-gray: #333333;
$neutral-white: white;

We can see the UI colors division discussed in the previous section as variables. These variables can then be used in your classes like so:

.icon{
color: $accent;
}

In this example, we set the color of a class icon to our access color.

The benefit to using variables is that if you do decide to change any of your colors, you only have to make the change in the variable lines which saves a lot of time. Additionally, you will a nice template for each project.

SCSS Font Variables

Similar to organizing your color palette using variables, you can also do the same with font variables.

Here is the way I like to divide my font variables:

  1. Font-family variants
  2. Size variants
  3. Weight (thickness) variants

Here is an example divided in this way:

//Font Variables
$primary-font: "Roboto Condensed";
$secondary-font: "Lato";
$large-size: 38px;
$medium-size: 28px;
$small-size: 20px;
$thin-weight: 100;
$medium-weight: 300;
$thick-weight: 400;

We implement these variables in the same fashion as our color variables like so:

.title{
font-family: $primary-font;
font-size: $large-size;
font-weight: $thin-weight;
}

The benefits to this are that you will start to having a stronger reflection on how fonts affect UX. Additionally, we can adjust our font values only in these variables.

SCSS Shape Variables

If you are like me and do a lot of pure CSS images, using shape variables can make a nice template really clean up your code.

The CSS code for the main shapes you will use can be via a nice tool called Clippy.

With Clippy you can select a shape and get the clip-path that will create your shape.

For each shape you can create a variable and assign the according clip-path value:

//Shape Variables
$circle: circle(50% at 50% 50%);
$triangle: polygon(50% 0%, 0% 100%, 100% 100%);
$hexagon: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
$star: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
//etc..

Capital and Lowercase Classes

For a parent CSS class, use a capitalized class name. For a child class, use a lowercase class name.

A simple example being:

<div class="Parent">
<p class="child">
</div>

One major benefit is that your CSS will have greater readability. You will have a rule of thumb to spot parent and descending classes without having to keep referencing the HTML.