Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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...
<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 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 ...
State
-Los estilos de State se pueden aplicar a
layout y/o a los estilos de module.
-Los estilos de State indican y una
de...
!important
State
<div id="header"
class="is-collapsed">
<form>
<div class="msg is-error">
There is an error!
</div>
<label for="searc...
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-gr...
Otros sistemas
BEM
Block, Element and Modifier.
OOCSS
Object Oriented CSS.
Ligas
https://smacss.com
https://github.com/jonathanpath/SASS-SMACSS
http://slidedeck.io/elHornair/smacss-presentation
htt...
Preguntas?
correo:ivan@medioyforma.info
twitter:@Koffer
sitios: medioyforma.info
drupalmexico.com
Iván Mejía /
Medio y forma estudio
Smacss. Organizando css
Smacss. Organizando css
Smacss. Organizando css
Upcoming SlideShare
Loading in …5
×

Smacss. Organizando css

370 views

Published on

Platica sobre esta técnica para organizar.

Published in: Design
  • Be the first to comment

  • Be the first to like this

Smacss. Organizando css

  1. 1. Organizando CSS SMACSS
  2. 2. Soy Iván Mejía. Soy diseñador web. Llevo varios años creando sitios web.
  3. 3. Una época más sencilla
  4. 4. <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>
  5. 5. <h2 style=“color:red;background:black;”> This is a red heading with a black background </h2>
  6. 6. Un mundo complejo
  7. 7. Sitios más complejos 1- Extensión (muchas páginas). 2- CMS. 3- Múltiples plantillas o temas. 4- Trabajo en equipo.
  8. 8. Organicemos
  9. 9. CSS - Predecible - Reusable - Mantenible - Escalable
  10. 10. CSS y Preprocesadores (Less, Sass)
  11. 11. SMACSS Scalable and Modular Architecture for CSS
  12. 12. SMACSS fue creado por Jonathan Snook https://smacss.com
  13. 13. -Una guía de estilos. -Una colección de patrones de diseño. -No es una librería o framework.
  14. 14. -Base -Layout -Module -State -Theme
  15. 15. Base body, form { margin: 0; padding: 0; } a { color: #039; } a:hover { color: #03F; }
  16. 16. Layout #header, #article, #footer { width: 95%; margin: auto; } #col-sm-3 { border: solid #CCC; border-width: 1px 0 0; }
  17. 17. Module .search > h2 { padding: 5px; } .search span { padding: 5px; }
  18. 18. 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.
  19. 19. 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.
  20. 20. !important
  21. 21. 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>
  22. 22. Theme // in module-name.css .mod { border: 1px solid; } // in theme.css .mod { border-color: blue; }
  23. 23. 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
  24. 24. Otros sistemas
  25. 25. BEM Block, Element and Modifier.
  26. 26. OOCSS Object Oriented CSS.
  27. 27. 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/
  28. 28. Preguntas?
  29. 29. correo:ivan@medioyforma.info twitter:@Koffer sitios: medioyforma.info drupalmexico.com Iván Mejía / Medio y forma estudio

×