Arquitectura y buenas prácticas CSS

Adalab, Madrid – 5 de Mayo, 2017

IgnaciodeNuevo's Logo

Soy Front-end Developer en Kubide especializado en arquitectura, front-end performance y responsive web design.
(Vamos que me encanta el CSS)

¿Qué más hago?

Podcasting en WeCodeSign y organizo Open Source Weekends

WeCodeSign Podcast's Logo Open Source Weekends Podcast's Logo

¡Comenzamos!

Existen DOS tipos de personas en el mundo. A los que nos gusta el CSS y a los que NO ;).

Naming Conventions

BEM, SMACSS, OOCSS

BEM

¿Cómo funciona?

btn

btn__price

btn--big

<!-- Correcto. La clase `error` está usada correctamente usada -->
<div class="error">
  
  <!-- `search-form` Elemento de tipo bloque -->
  <form class="search-form">

    <!-- `search-form__input` Elemento de tipo elemento -->
    <input class="search-form__input">

    <!-- `button` Elemento de tipo modificador -->
    <button class="search-form__button">Search</button>
  </form>

  </form>
</div>

Documentación de BEM

SMACSS

¿Cómo funciona?

Base

Layout

Module

State

Theme

<!-- Base: Selectores, aunque a veces pueden ser atributos, pseudoelementos, selectores hijos o padres. -->
<body>, <a:hover>

<!-- Secciones, entendiendo que dentro de cada sección el contenido se dividirá en módulos. -->
<article>, <footer>

<!-- Componentes que pueden ser reutilizados. -->
.module span

<!-- Reglas que nos marcan el estado de nuestros módulos. Ej: estado activo de un botón. -->
.is-collapsed, .is-active

<!-- Theme: SOpcional. -->
.mod, <.theme-background>

Documentación de SMACSS

Object Oriented CSS (OOCSS)

¿Cómo funciona?

Separación de estructura y aspecto

Separación de "contenedores" y contenido: ha de comportarse igual esté donde esté

<!-- Sin usar el "Single Responsibility Principle" -->
.card {
  color: black;
  margin-top: 100px;
  box-shadow: 0px 0px 30px rgba(0,0,0,.3);
  background-color: white;
  font-size: 30px;
  position: relative;
  display: block;
  width: 50%;
  padding: 30px;
}

<!-- Usando el el "Single Responsibility Principle" -->
.card {
  color: goldenrod;
  box-shadow: 0px 0px 30px rgba(0,0,0,.3);
  background-color: silver;
  font-size: 30px;
  padding: 30px;
}

.half {
  position: relative;
  display: block;  
  width: 50%;
}

.mtxl {
  margin-top: 100px;
}

Documentación de OOCSS

CSS = Hojas de Estilo en Cascada

Parece obvio pero os daréis cuenta de que no siempre es así

CSS-in-JS

Existe otro mundo allí fuera. No creo que sea una buena práctica pero tiene sus usos y ayuda en muchas ocasiones.

Arquitectura Sass 7-1

Parte 1/3

        
sass/
|
|– abstracts/
|   |– _variables.scss    # Sass Variables
|   |– _functions.scss    # Sass Functions
|   |– _mixins.scss       # Sass Mixins
|   |– _placeholders.scss # Sass Placeholders
|
|– base/
|   |– _reset.scss        # Reset/normalize
|   |– _typography.scss   # Typography rules
|   …                     # Etc.
            

Documentación de Sass 7-1 Pattern

Arquitectura Sass 7-1

Parte 2/3

        
|
|– components/
|   |– _buttons.scss      # Buttons
|   |– _carousel.scss     # Carousel
|   |– _cover.scss        # Cover
|   |– _dropdown.scss     # Dropdown
|   …                     # Etc.
|
|– layout/
|   |– _navigation.scss   # Navigation
|   |– _grid.scss         # Grid system
|   |– _header.scss       # Header
|   |– _footer.scss       # Footer
|   |– _sidebar.scss      # Sidebar
|   |– _forms.scss        # Forms
|   …                     # Etc.
            

Documentación de Sass 7-1 Pattern

Arquitectura Sass 7-1

Parte 3/3

        
|
|– pages/
|   |– _home.scss         # Home specific styles
|   |– _contact.scss      # Contact specific styles
|   …                     # Etc.
|
|– themes/
|   |– _theme.scss        # Default theme
|   |– _admin.scss        # Admin theme
|   …                     # Etc.
|
|– vendors/
|   |– _bootstrap.scss    # Bootstrap
|   |– _jquery-ui.scss    # jQuery UI
|   …                     # Etc.
|
`– main.scss              # Main Sass file

            

Documentación de Sass 7-1 Pattern

Tras esta maravilla...

Habrá momentos en los que usaréis frameworks o librerías como Angular2, React, Vue (inserte aquí framework de moda)

You might not need a CSS framework

Bootstrap, Foundation

¡Es el mal!, En verdad no pero no se debería usar para todo.

Buenas prácticas CSS

1/11

Consistencia al escribir código

2/11

No usar IDs

3/11

No usar !important. Cada vez que se haga el Dios del Front matará un gatito. ¡Y no queremos que pase!

4/11

Orden de propiedades CSS

5/11

No usar shorthands, debido a que estás dando en muchos casos valores por defecto el navegador como en margin: 0 auto

6/11

Single Responsibility Principle

7/11

Minificar

8/11

UnCSS

9/11

Concatenar

10/11

Usar clases específicas para JS

11/11

Uso de Linters

Tareas Gulp de Jorge ;)

¿A quién seguir?

Gente que habla habitualmente de buenas práctias y arquitectura CSS.

¿Alguna pregunta?