The Problem

CSS gets bloated overtime.

We jump in with the best intentions.

We study the design and know all the

pieces. It's time to start building.

Time goes on, things are going smooth.

New features are added but that's no big deal, right?

Well, then more features are added.

While more features are added,

others are removed.

Do the styles for old features get removed with the markup?

Before you know it, your CSS is bloated and clean-up seems so daunting.

After time, will you or another developer know where to put specific CSS?

This is where everything collides and turns a bad situation worse.

The Solution

Keep things simple and clear

Know your site

What repeats and can be reused?

Work with your designer

Make suggestions about what can be reused, or even

what may be simplified for better performance

Keep a table of contents

and don't stray from it​

/**
 * 01. Logo
 * 02. Navigation
 * 03. Mobile Navigation
 * 04. Promo Banner
 **/


// 01. Logo

// 02. Navigation

// 03. Mobile Navigation

// 04. Promo Banner

If you know you're doing something wrong,

keep a shame file

/**
 * 01. Team single paragraph
 **/


// 01. Team single paragraph

// @todo article.post .team-info .entry-content p needs
// to be refactored it is too specific

body.team .team-info article.post .entry-content p {
    font-size: 1.25rem;
}

A Step Further

The           Solution

Become granular with your Sass

Break apart Sass files by type; global, page, plugin, config

Global Styles

Header, Footer, Typography, Components, etc.

Components can be pagination, comments, forms

Page Styles

Custom Post Type Archives and Single

While Posts and a CPT for Articles or News can be a 1-to-1, a staff post type or a location post type may have custom styles

Plugin Styles

Custom styles to go along with installed plugins

Keeping plugins styles separate will make life easy

when a plugin is uninstalled or updates

Sass Config

$variables, @mixins, and more

Using variables, mixins, and functions

makes everything easier.

$black: #000;
$linchpin-blue: #3fc1d0;

$primary-color: $linchpin-blue;
$secondary-color: $black;

#wcri-slide {
    background: $primary-color;
    color: $secondary-color;
}

@mixin clearfix {
    &:before,
    &:after {
        content: '';
        display: table;
    }

    &:after {
        clear: both;
    }
}

#wcri-slide {
    @include clearfix;
}

@function light-or-dark( $color ) {
    $return-color: $black !default;

    @if ( lightness( $color ) > 50% ) {
        $return-color: $white;
    }

    @return $return-color;
}

Sass Tools To Know

For Compiling

• Gulp

• Grunt

• Compass

Compiling Tools

• Autoprefixer

• Minification

For Practicing

• CodePen.io

• JSFiddle.net

• CSSDesk.com

When It's All Said and Done...

We have a process the supports a streamlined and easier future for ourselves

Questions?

See me at the Happiness Bar!

slides.com/maxinacube/wcri-2017