Smacss. Organizando css

Organizando CSS

SMACSS

Soy Iván Mejía. Soy diseñador web. Llevo varios años creando sitios web.

Una época más

sencilla

<html> <head> <style type="text/css"> .title { color: blue; text-decoration: bold; text-size: 1em; }

.author { color: gray; } </style> </head> <body> <p> <span class=“title">Que bonita pagina</span> <span class=“author">que vida tan buena aca</span> </p> </body> </html>

<h2 style=“color:red;background:black;”>

This is a red heading with a black background

</h2>

Un mundo complejo

Sitios más complejos 1- Extensión (muchas páginas). 2- CMS. 3- Múltiples plantillas o temas. 4- Trabajo en equipo.

Organicemos

CSS - Predecible - Reusable

- Mantenible - Escalable

CSS y Preprocesadores

(Less, Sass)

SMACSS

Scalable and Modular Architecture for CSS

SMACSS fue creado por Jonathan Snookhttps://smacss.com

https://smacss.com

-Una guía de estilos. -Una colección de patrones de diseño. -No es una librería o framework.

-Base-Layout-Module-State-Theme

Base body, form { margin: 0; padding: 0; }

a { color: #039; }

a:hover { color: #03F; }

Layout#header, #article, #footer { width: 95%; margin: auto; }

#col-sm-3 { border: solid #CCC; border-width: 1px 0 0; }

Module

.search > h2 { padding: 5px; }

.search span { padding: 5px; }

StateUn estado es algo que aumenta y prevalece sobre todos los demás estilos. Por ejemplo, una sección de acordeón puede estar en un estado colapsado o desplegado. Un mensaje puede estar en un estado de éxito o error.

State-Los estilos de State se pueden aplicar a layout y/o a los estilos de module.-Los estilos de State indican y una dependencia en JavaScript.

!important

State<div id="header" class="is-collapsed"> <form> <div class="msg is-error"> There is an error! </div> <label for="searchbox" class="is-hidden">Search</label> <input type="search" id="searchbox"> </form> </div>

Theme// in module-name.css .mod { border: 1px solid; }

// in theme.css .mod { border-color: blue; }

scss/|- _base/ | |- _config.scss | |- _presets.scss | |- _headings.scss | |- ... |- _layouts/ | |- _l-base.scss | |- _l-grid.scss |- _modules/ | |- _m-buttons.scss | |- _m-tabs.scss |- _states/ | |- _s-buttons.scss | |- _s-tabs.scss |- application.scss stylesheets/|- application.css

Otros sistemas

BEMBlock, Element and Modifier.

OOCSSObject Oriented CSS.

Ligas https://smacss.com

https://github.com/jonathanpath/SASS-SMACSS

http://slidedeck.io/elHornair/smacss-presentation

http://timhartmann.net/frontend-development/scss-styleguide-with-bem-oocss-smacss/

https://smacss.com

https://github.com/jonathanpath/SASS-SMACSS

http://slidedeck.io/elHornair/smacss-presentation

Preguntas?

correo:[email protected] twitter:@Koffer

sitios: medioyforma.info drupalmexico.com

Iván Mejía / Medio y forma estudio

http://twitter.com/Koffer

http://www.medioyforma.info

http://drupalmexico.com/

Design

Smacss. Organizando css