Agenda

• Introduccion / Introduction
• Inspiracion / Inspiration
• DRY?
• Estilo v. Contenido / Style v. Content
• Convenciónes / Conventions
• Herramientas de Éxito / Tools for Success

Hola.

Me llamo Pamela Ocampo.

Desarrollo software en ThoughtWorks.

I speak Spanglish and really like front-end projects.

Inspiración

• Many developers working on front-end code introduces a lot of challenges.

• Teammates understood Javascript best practices.

  • CSS? Another story.

• Our biggest tool of success was to set guidelines.

  • These guidelines I will carry on to other projects.

  • Sharing is caring and I'd like to share the knowledge.

DRY?

"Don't Repeat Yourself"

CSS is code too! Make it reusable and consistent. 

Avoid Spaghetti CSS

Make it reusable

https://flic.kr/p/7Ai8hs

Estilo v Contenido

Fundamental rule of thumb: Keep your content separate from your styles.

• HTML defines structure for content
  • Structure should be semantic.
• CSS applies style to define a look and feel
  • Keep styles in stylesheets. 

Estilo v Contenido

What is semantic?

HTML tags that have meaning. 

Great for accessibility.

Human readable. 

Estilo v Contenido

Why?

• Separation of style vs content helped the team work in parallel.
• Content was unaffected by changes in CSS.
• Content could change without needing to update styles.
• This meant less git merge conflicts!

Convenciónes

CSS classes allow for reusability of common styles

• They should be used wisely:
  • Rarely use IDs: they can only be used once
  • Watch out for combining element selectors. They are too specific and tie your structure to your styles.

#unique-button {
// can only be used to select ONE
}
p.short-description {
// selector requires a paragraph element 
}

Convenciónes

• Logical CSS class names: a better way to organize styles
  • Allow name-spacing
  • Reduce specificity
  • Highly reusable

Convenciónes

• Many conventions exist:
  • SMACSS: Scalable and Modular Architecture for CSS
  • OOCSS: Object Oriented CSS
  • BEM: Block Element Modifier pattern
• Use what makes sense to you, or make your own!

Convenciónes

.navigation { // main component
    font: 16px Helvetica, sans-serif;
    margin-top: 0px;
    margin-bottom: 20px;
}

.navigation--link { // sub component
    color: #68d6a7;
    font-size: 0.8em;
}

.navigation--link__disabled { // state
    background-color: #6F6F6F;
    color: #262626;
    cursor: default;
}

CSS

Convenciónes

<nav class="navigation">
    <ul>
        <li>
            <a href="/home" class="navigation navigation--link">Home</a>
        </li>
        <li>
            <a href="/v2" class="navigation navigation--link__disabled">Beta Feature!</a>
        </li>
    </ul>
</nav>

HTML

Herramientas

de exito!

Sass

• Syntactically awesome stylesheets

• Sass is preprocessed CSS that introduces

  • Variables

  • Functions 

  • Nesting

• Reusability++

Sass-power!

// Variables
$green: #68d6a7;
$gray: #6F6F6F; 
$dark-gray: #262626;
$default-link-color: $green;

$default-font: 16px "Open Sans", Helvetica, sans-serif;
$small-font-size: 0.8em;

// Nesting
.navigation { // main component
    font: $default-font;
    margin-top: 0px;
    margin-bottom: 20px;

    &--link { // sub component
        color: $default-link-color;
        font-size: $small-font-size;

        &__disabled { // state
            background-color: $gray;
            color: $dark-gray;
        }
    }

}

Y los gatitos?

Unfortunately...

• Sometimes you have to support Internet Explorer 8.

Not about the tools?

It was about the people and sustainability of our process.

Gracias!

likescoffee.com