Back

CSS Tutorial: Use a single container class to apply re-usable content area styling

On a recent set of projects I found myself repeating a core piece of code for content area styling. This includes elements like standard link treatments, block quotes, etc. that I really only want applied where I’m publishing content, and that I also do not want limited to just a single instance of a component.

The solution I’ve outlined below allowed me to reduce the amount of code I needed throughout the site to achieve this similar effect, while also ensuring I can more easily maintain or make changes to it, or even override it for specific instances only.

Tech debt

Repeated code for even simply styled elements creates more work for anytime in the future when you want to update every instance of that styling. You’ll have to go back to each instance and repeat the same change. This tedious process is what causes tech debt, and it can occur both in your CSS whether you’re using common utility classes or individual styles.

Because this technique styles individual elements rather than class names inside a single container class, it’s especially useful when you need to ensure uniform styling from the output of a content management system (CMS) or other source of data for your content where you can’t as easily control the classes inside that content, either because it’s too difficult and causes too much UX friction or it’s not possible.

The code

Using Sass, I like to nest my styling and layout within the central class on the container we’ll use to hold all of our elements.

By focusing on styling actual, semantic elements instead of target classes, we’re able to apply the outer class wrapper just once to any location that needs consistent layout and styling for all standard content elements. While this example mostly uses simpler, common elements found inside content, you can easily include any class to target 3rd-party integrations at the end of your cascade, too.

Below I’ve included a stripped down version of what I’m using to replicate this system on this site, with a number of 3rd-party integrations removed and a few fragments of my favorite Sass mixins sprinkled in, which I’ll share in full soon in addition to my typography design system.

In this case I’ve used the name .site-content for the outer class container. Now I can easily update existing styles, or repeat a very specific, focused set of typography based styles to all of my content areas site-wide, while ensuring my repeated code and thus my tech debt stays extremely low.

By further keeping this early in my cascade architecturally, I’m also able to quickly apply modifications for any single instance. This system is therefor especially useful for large projects with multiple content areas or components that rely on the cascade.

The SCSS:

$contentAreaWidth: 700;

.site-content {
    max-width: 100%;

    * {
        max-width: $contentAreaWidth;
        margin-left: auto;
        margin-right: auto;
    }

    h1, h2, h3, h4, h5, h6 {
        margin-top: 3.25rem;
    }

    h3 {
        @include headline-sans-5;
        @include font-size(1.6);
        margin-top: 4rem;
    }

    h2 {
        @include headline-sans-4;
        @include font-size(2.6);
        line-height: 1.25;
    }

    h3 + h2 {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    h2 + p {
        margin-top: 1.5rem;
    }

    strong {
        font-weight: 700;
    }

    .alignfull {
        max-width: 1800px;
    }

    .alignwide {
        max-width: 950px;
    }

    .wp-block-image {
        margin-top: 40px;
        margin-bottom: 40px;

        figcaption {
            @include font-size(1.4);
            max-width: 910px;
        }

        a {
            min-width: 100%;
            box-shadow: none;
        }
    }

    img {
        object-fit: cover;
        max-width: 100%;
        height: 100%;
        width: 100%;
    }

    ul,
    ol {
        max-width: 650px;
        line-height: 1.75;
    }

    figure {

        &.has-border {

            img {
                border-radius: 5px;
                border: 1px solid $lightGray2;
            }
        }
    }

    .sticky-inner {
        position: sticky;
        top: 25vh;

        p {
            @include font-size(2.8);
            line-height: 1.5;
            max-width: 450px;
            margin-left: 0;
        }
    }

    form {

        p {
            margin: 0;
        }

        label {
            @include font-size(1.4);
            margin-top: 2rem;
            display: block;
        }

        input,
        textarea {
            @include font-size(1.6);
            border: 1px solid $lightGray4;
            border-radius: 3px;
            padding: 1rem;
            margin: 0.5rem 0 0;
            width: 100%;
            max-width: 350px;
        }
    }
}

Published February 1, 2021