Smacss. Organizando css

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

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

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

CSS
- Predecible
- Reusable
- Mantenible
- Escalable

CSS
y Preprocesadores
(Less, Sass)

SMACSS
Scalable and Modular Architecture for CSS

SMACSS
fue creado por
Jonathan Snook
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;
}

State
Un 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.

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

BEM
Block, Element and Modiﬁer.

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/

correo:ivan@medioyforma.info
twitter:@Koffer
sitios: medioyforma.info
drupalmexico.com
Iván Mejía /
Medio y forma estudio

Smacss. Organizando css

Más contenido relacionado

La actualidad más candente

Similar a Smacss. Organizando css

Más de Medio y forma

Último

Smacss. Organizando css