Maxwell Morgan

Lead Front-End Engineer

 

 

@maxinacube

Maintain Your Theme's Styles,

Future You Will Thank You

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

Made with Slides.com