Easy Ways to Improve Your CSS (and SASS)

It has been about two years since I started this site and which was also the end of my senior year of college. And I have learned a lot since then. There have been several little things that I have pick up on that will make your css look nicer.

Alphabetize CSS Prosperities


It is way to easy to get carried way writing css (at least for me). I will be styling something and my train of thought will go something like: “This needs to be display: block, it needs a width of 50%, also since there will be lots of them, I need to float them. It also needs some padding and margin.” And so on. I end up with something like:

Go From This:

.cool-thing {
    display: block;
    width: 50%;
    float: left;
    padding: 2rem 4rem;
    margin: 0 0 1rem;
    line-height: 1rem;
    font-size: 1.25rem;
}

This looks bad and is due to laziness. It looks so much nice to alphabetize them.

To This:

.cool-thing {
    display: block;
    float: left;
    font-size: 1.25rem;
    line-height: 1rem;
    margin: 0 0 1rem;
    padding: 2rem 4rem;
    width: 50%;
}

Only recently have I been trying to break this habit. It is hard at first but if you keep at it, it becomes more natural.

Take it One Step Further with SASS


Now that your css properties are alphabetize, lets take it to the next level with SASS.

Extends First

Start by putting @extends first. It is best to put these first because often time you need to override these. For example, you might be extending your base button style to an element, but this element needs to be different or you might need to extend a placeholder to an element.

Includes Last

I find it best to put @includes last. You shouldn’t need to override anything in these very often. This is because includes are for things like transitions, gradients, transforms, flexbox and so on.

Nest Media Query Under Each Selector


Until recently I would put all my styling for each breakpoint under one @media. This way will produce slightly less code, so if that is a top priority, keep doing that way. However, if you are ok with having a tiny bit for code then nest all the @media inside their selector. It becomes much easier to see what is changing at each breakpoint in other nearby selectors this way. Another plus to this is if your are using a preprocessor and are nesting, you don’t have to recreate the whole nested structure for each breakpoint.

Go From This:

.cool-thing {
    background: red;
}

@media screen and (min-width: 540px) {
    .cool-thing {
        background: blue;
    }
}

To This:

.cool-thing {
    background: red;

    @media screen and (min-width: 540px) {
        background: blue;
    }
}

Completed Look


.cool-thing {
    @extend .button;

    display: block;
    float: left;
    font-size: 1.25rem;
    line-height: 1rem;
    margin: 0 0 1rem;
    padding: 2rem 4rem;
    width: 100%;

    @include linear-gradient(#262626, #555);        
    @include single-transition;

    @media screen and (min-width: 540px) {
        width: 50%;
    }
}

Leave Your Feedback

Name is required.
Email is required.
URL is required.
Message is required.