Coding Artist
Published in

Coding Artist

5 Steps For Cleaning Up Your Code In Pure CSS Images

The more you practice with pure CSS images, the easier and more natural it should become. When you get to this point of being comfortable with pure CSS images, I think it is appropriate to start thinking of ways to clean your code. Here are 5 steps I have personally learned and started implementing to do just that.

1. Use Pug

Pug (formerly Jade) is an HTML preprocessor that allows you to write shorthand for declaring a div with a class. For example, instead of writing

<div class="box"></div>

You can simply write

.box

Now, you will surely be nesting divs when making pure CSS images. So, instead of doing it like this…

<div class="box">  <div class="head"></div></div>

You can just so this…

.box
.head

Just keep in mind that spacing will matter. A nested class should be indented by two spaces.

Because pure CSS images use just plain divs, Pug is very easy to start implementing and reduces typing while improving readability.

Fortunately, Codepen supports Pug.

Here is how you set it up in Codepen:

Very simple and super cool!

In the video below, you can see me use Pug in action.

Personally, I like to start off with cranking out all the classes that I will need in order to create the pure CSS image with Pug. I recommend doing this as it forces you to break down your pure CSS image into components before you begin. This is essentially the same as stating the problem before you attempt to solve it.

2. Use CSS Variables

CSS variables are an easy way to organize certain values you reuse often. In the case of pure CSS images, you will use colors and shapes in several places.

You can also implement CSS variables very easily with Codepen. You simply have to change the settings to use the SCSS preprocessor.

Next, you can define your variables at the top like so…

$black: #000000;

Then, you can use it in classes…

.box {  background: $black;}

As I mentioned earlier, there are two ways CSS variables can be very helpful for pure CSS images, colors and shapes.

By defining the colors as variables at the top of your CSS, you only have to grab the hex codes once and you can use the color in multiple places.

Personally, I like to organize my colors into categories of primary, accent, etc. I have a pen that actually allows you to put in hex codes in categories like those and see an instant demo:

By having colors picked and organized beforehand, you can use CSS 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;

The benefit to using colors variables that are organized in this manner 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 pure CSS image.

If you want an easy way of generating colors, I highly recommend Coolors.

With Coolors, you can generate color schemes by simply pressing the spacebar.

In addition to CSS variables for colors, it’s also handy to organize your shapes (which I easily grab from Clippy, not supported in Firefox) used in a pure CSS image into variables.

//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..

Above, you can see clip-path values that can be used to transform rectangles into shapes. As you can also tell, some clip-path values can be pretty length, which makes the CSS variables all the more useful.

3. Better Naming Conventions

To be completely honest, I still struggle with this one. Nevertheless, it is important to have good naming conventions for your CSS classes.

Especially with Codepen, it is easy to not care as much because it’s your personal demo and might not be something in production. However, you have to remember that what makes Codepen awesome is that it’s a community.

Other people may check out your code and look for inspiration. It makes things much easier if you name everything so another person could easily see what component of your image the class is styling.

In general, it is good practice and will even help you read your own code.

Personally, I am not too strict with my naming conventions as long as they are clear and consistent.

Because more CSS images might have many classes that are just simple shapes and repeated, I tend to be clear and consistent with this syntax…

.parent-thing-number//example
.box-stripe-1

If anyone has further tips or articles on this topic, please drop them in the comments.

4. Adjust the Codepen Editor

This point is not about cleaning your code in the technical sense, but it is a useful (and maybe completely obvious) tip.

In Codepen, there is no need to have the JS column expanded for pure CSS images. You can easily drag the column down and expand the HTML and CSS columns.

I also mentioned earlier that I crank out defining my classes in the HTML with Pug before I do any styling. Therefore, you can also minimize the HTML.

5. CSS Comments

With the SCSS preprocessor, you can also add comments like so…

//I'm a comment

I highly recommend using comments to surround your components in the image.

For example, you might be making a koala with an eye being a major component. However, you may have an outer circle and a pupil class that together makes the final component of the eye.

In this case, you can comment like so…

// Beginning Eye Component .eye-outer-circle-1 {
}
.eye-pupil-1 {}// Ending Eye Component// Beginning [next] Component

That’s all folks! Hopefully, this short post was beneficial in some way. Please share if that was the case.

Additionally, if you have not yet learned to make pure CSS images, check my beginner’s guide.

Cheers,
Mike Mangialardi
Founder of Daily CSS Images & Coding Artist

--

--

--

Providing journeys for developers who see the web as their canvas

Recommended from Medium

So you want to learn Python?

Dealing with Python Package Install Errors on Older Ubuntu Distros

Why QA Is Important in Software Development

The Advanced Guide to jQuery i18n

Scaling tests on Google Kubernetes Engine with Cloud Build

How we wrote xtensor 2/N: access operators

DfinitySZ AMAs Review|Nuance — Dfinity Ecosystem Web3.0 Blogging

Game Of State -1

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Michael Mangialardi

Michael Mangialardi

https://leanpub.com/designsystemsfordevelopers

More from Medium

How to reduce a background-image sharpness and opacity.

Scroll Section to Section Animation with JavaScript

What does CSS do? The power of Cascading Style Sheets (1/3)

HOW CSS TRANSITION WORK