{CSS & Kittens}

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. 

.super-stylish {
    color: purple;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1em;
    padding-bottom: .8em;
}

.plain-and-simple {
    color: black;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1em;
}
p {
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 1em;
}

.super-stylish {
    color: purple;
    padding-bottom: .8em;
}

.plain-and-simple {
    color: darkgray;
}

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. 

<div id="navigation">
    <a href="/login">Login</a>
</div>
<div>
    <h1>Hi</h1>
</div>
<div>Content</div>
<div id="footer"></div>
<header>Hi</header>
<nav>
    <a>Login</a>
</nav>
<article>Content</article>
<footer></footer>

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;
        }
    }

}

Before Processing

.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;
}

After Processing

Y los gatitos?

Unfortunately...

  • Sometimes you have to support Internet Explorer 8.
  • So we had fun as we prototyped our look & feel
  • Needed temporary content
    • PlaceKitten.com: placeholder images
    • Hipster Ipsum:  placeholder text

 

 

 

 

But it's not about the tools!

Not about the tools?

It was about the people and sustainability of our process.

Gracias!

likescoffee.com

Made with Slides.com