Buenas

practicas - Front end

Table of Contents
Introduction 0

2
Buenas practicas - Front end

Buenas practicas - Front end

Indice
Buenas practicas CSS
Bitters
Clases de utilidad
BEM
Estructura de archivos
Reset del CSS
Preprocesadores
Buenas practicas HTML
Responsive Meta Tag
Link en nueva pestaa
Utilizar etiquetas semnticas de HTML 5
Gemas
Personalizar checkbox para Simple Form
Imagenes para Wicked PDF
Buenas practicas generales
No repitas cdigo
Respetar el idioma
Performance tips

Buenas practicas CSS

Bitters
Sitio web - Github

Bitters es un conjunto de reglas css que nos permiten definir estilos por default de manera
organizada. Esta libreria nos permite definir el estilo general de nuestra aplicacin
rapidamente y ayuda a mantener la consistencia del front-end de nuestra aplicacin.

Estructura de archivos:

base
| _base.scss
| _buttons.scss

Introduction 3
Buenas practicas - Front end

| _forms.scss
| _grid_settings.scss
| _lists.scss
| _tables.scss
| _typography.scss
| _utility.scss
| _variables.scss

El archivo _variables.scss define las variables principales, las cuales pueden ser
modificadas para reflejar el diseo de nuestra aplicacin.

Es una buena practica agregar Bitters cuando estamos arrancando con nuestra aplicacin
para definir rapidamente y de manera global los estilos generales.

variables.scss

Introduction 4
Buenas practicas - Front end

// Typography
$base-font-family: 'Open Sans', helvetica, arial, sans-serif;
$heading-font-family: $base-font-family;

// Font Sizes
$base-font-size: 16px;

// Line height
$base-line-height: 1.5;
$heading-line-height: 1.2;

// Other Sizes
$base-border-radius: 3px;
$base-spacing: $base-line-height * 1em;
$small-spacing: $base-spacing / 2;
$base-z-index: 0;

// Colors
$blue: #477dca;
$dark-gray: #333;
$medium-gray: #999;
$light-gray: #ddd;
$white: #fff;
$black: #000;

// Font Colors
$base-font-color: $dark-gray;
$action-color: $main-green;

// Border
$base-border-color: $light-gray;
$base-border: 1px solid $base-border-color;

// Background Colors
$base-background-color: #fff;
$secondary-background-color: tint($base-border-color, 75%);

// Forms
$form-box-shadow: inset 0 1px 3px rgba(#000, 0.06);
$form-box-shadow-focus: $form-box-shadow, 0 0 5px adjust-color($action-color, $lightness: -

// Animations
$base-duration: 150ms;
$base-timing: ease;

// Buttons
$all-buttons: 'button';

Ms informacion:

Introduction 5
Buenas practicas - Front end

http://www.sitepoint.com/adding-bitters-to-bourbon-and-sass/

Clases de utilidad
Definicin:

In its essence, a helper class can be described as an independent visual behavior

rule, meaning its not tied to any specific HTML element or group of elements, and is
used as an extra class on an object to help prevent repetition of code but still achieve
the desired behavior. Basically, the benefit becomes clear when you need just that little
extra behavior on your element, for example a button thats positioned on the right side
of the screen instead of the left side.

Si nuestro proyecto cuenta con Bootstrap como framework css ya contamos con un
conjunto variado de clases de utilidad/helpers que podemos utilizar, como son las siguientes
(entre muchas otras):

.pull-left
.pull-right
.clearfix
.text-center

Es una buena practica definir todas nuestras clases custom de tipo helper en un unico
archivo _helper.scss. En el momento de agregar una clase a este archivo es importante
comprobar que no exista ya una clase igual o que Bootstrap no nos brinda una clase helper
con la misma funcionalidad (para evitar repetir las clases).

Tambin debemos asegurarnos que todas nuestras clases helpers sigan la misma
convencin a la hora de nombrarlas para mantener un estilo uniforme y predecible.

El concepto detras de las clases de utilidad es el de Inmutabilidad. Estas clases no deben

ser modificadas ya que su esencia es ser confiables, predecibles y reducir los side-effects.
Tampoco hay que aplicar estilos CSS en base a estas clases (excepto los de la misma clase
obviamente).

Para forzar la inmutabilidad y que estas clases no sean pisadas por otras, podemos agregar
!important a las declaraciones de estilos de las mismas.

Ejemplo:

.mt10{margin-top: 10px !important;} //Forzamos la inmutabilidad mediante el !important

Introduction 6
Buenas practicas - Front end

Debemos utilizar las clases de utilidad con precaucin, ya que sino nuestros elementos
pueden quedar con muchas clases de CSS. La idea no es reemplazar todo nuestro cdigo
CSS por clases helpers sino saber utilizar estas ultimas cuando sea necesario.

En el siguiente ejemplo vemos cuando es un buen caso para aplicar una clase helper. Las
clases helpers nos permiten mantener a nuestro modulo (o componente) ms agnostico /
versatil.

Don't

//HTML
.user-avatar.avatar-inside-sidebar

//CSS
.user-avatar{
//. user-avatar css
&.avatar-inside-sidebar{
margin-top: 10px;
}
}

Do

//HTML
.user-avatar.mt10

//CSS
.mt10{ margin-top: 10px !important; }

.user-avatar{
//. user-avatar css
}

Ms informacion:

Cdigo DRY utilizando helpers (muy interesante la discucin en los comentarios):

http://www.sitepoint.com/using-helper-classes-dry-scale-css/
Clases helper en Bootstrap: https://www.mendix.com/blog/using-bootstrap-css-helper-
classes-in-your-project/
Clases helper en Bootstrap:
http://www.w3schools.com/bootstrap/bootstrap_ref_css_helpers.asp

BEM

Introduction 7
Buenas practicas - Front end

BEM es una de las tantas convenciones que existen para nombrar a nuestras clases
CSS.

Si utilizamos BEM correctamente nuestro CSS sera ms claro y semantico. Tambin nos
ayudara a reducir los side effects de nuestro cdigo.

To put this more generally, side effects describe the phenomenon in which something
that appears to only affect things in a very limited scope, actually affects a much
broader range of things, and does so in a way that may not be obvious to the person
performing the action.

Ejemplo de CSS con BEM:

// CSS

// Block
.user-avatar{
display: inline-block;
border: 2px solid black;
}

// Element
.user-avatar__image{
border-radius: 5px;
margin-right: 10px;
}

.user-avatar__label{
color: green;
text-transform: uppercase;
}

// Modifier
.user-avatar--big{
border: 5px solid black;
}

// HTML

div.user-avatar.user-avatar--big
img.user-avatar__image
span.user-avatar__label

Cada bloque representa un modulo o elemento de nuestro sitio (.user-avatar). Esto nos
permite generar un cdigo CSS ms modular.

En el caso de querer generar una modificacin al bloque usamos un modifier (.user-avatar-

-big).

Introduction 8
Buenas practicas - Front end

Es recomendable declarar nuestros estilos en base a modulos, en vez de en base a las

vistas o a selectores padre. Esto nos permite mantener un CSS ms modular.

Ms informacin:

Reducir side-effects en CSS mediante BEM: http://philipwalton.com/articles/side-effects-in-

css/
Introduccin a BEM: https://css-tricks.com/bem-101/ BEM modular:
https://robots.thoughtbot.com/keeping-the-frontend-modular-with-bem Lista de articulos
sobre BEM: https://github.com/sturobson/BEM-resources

Estructura de archivos
Estructurar correctamente nuestro directorio de archivos CSS nos permitir tener un mejor
manero de nuestro cdigo.

A la hora de eliminar o modificar un modulo del front-end podemos estar seguros que
todo el CSS referido a dicho modulo se encuentra en un archivo especifico.
Podemos encontrar ms rapido el CSS referido a un modulo.

Podemos encontrar ciertos ejemplos de estructura de archivos en los siguientes links:

Codepen CSS: http://codepen.io/chriscoyier/post/codepens-css

Trello CSS: http://blog.trello.com/refining-the-way-we-structure-our-css-at-trello/
Ghost CSS: http://dev.ghost.org/css-at-ghost/#folderarchitecture
Como estructurar tu proyecto SASS: http://thesassway.com/beginner/how-to-structure-a-
sass-project

Podemos adoptar la siguiente estructura bsica para los nuevos proyectos:

styles
| base (Bitters o estilos de reset)
| layout
| header.scss
| footer.scss
| sidebar.scss
| login.scss
| __patterns
| _books.scss
| _user.scss
| _login.scss
| __main.scss

Introduction 9
Buenas practicas - Front end

En la carpeta base colocamos todos nuestros estilos de elementos generales. Podemos

usar los archivos que nos provee Bitters como organizacin o sino crear nuestros propios
archivos de reset.

En la carpeta layout colocamos nuestros estilos referidos a sectores especiales de nuestra

aplicacin, como son el header, el footer, el sidebar, etc. Cualquier estilo referido a una
unica vista, que se caracteriza por no ser reutilizable, lo colocamos en esta carpeta.

En la carpeta patterns colocamos todos los modulos que se repiten a lo largo de la

aplicacin. Es importante reconocer aquellos mdulos que se repiten para poder
abstraerlos.

En el caso de proyectos viejos con grandes archivos CSS, es recomendable intentar de

reordenar los estilos en archivos y si esto no es posible generar un indice al principio de
application.css que nos indique que estilos podemos encontrar en el archivo.

Reset del CSS

Resetea las propiedades CSS para eliminar diferencias entre navegadores desde el
principio. Es muy buena idea empezar tu hoja de estilos general con una serie de
declaraciones que reseteen propiedades como los margin, los padding y los border de los
elementos ms comunes.

Hay algunos librerias de reset como lo es normalize.css.

Preprocesadores
Aydate de los pre procesadores: estas aplicaciones nos permiten escribir cdigo con
mayor agilidad y libertad de posibilidades, haciendo luego el trabajo sucio de adaptarlo a
un formato ptimo para todo tipo de navegadores. Desde luego, no son la opcin ideal para
puristas y pueden resultar confusos para quien se est iniciando en este terreno, pero
merece la pena echar un vistazo a las bondades que aportan preprocesadores como SASS,
STYLUS o LESS.

Buenas practicas HTML

Responsive Meta Tag

Introduction 10
Buenas practicas - Front end

Si ves que cuando achicas la resolucin se hace un scroll horizontal y los divs no se ajustan
es porque te falta esta etiqueta meta en el HEAD.

<meta name="viewport" content="width=device-width, initial-scale=1">

Link en nueva pestaa

<a href="#" target="_blank"> Hola soy un link </a>

Utilizar etiquetas semnticas de HTML 5

Las etiquetas semnticas estructurales nos sirven para que los motores de bsqueda
sepa con exactitud qu partes de su contenido corresponden a cada una de las partes
tpicas de un sitio. Generalmente, en cualquier documento tenemos una cabecera, un
cuerpo y un pie de pgina, elementos que definen la estructura representados por diversas
etiquetas:

Gemas
Personalizar checkbox para Simple Form

Introduction 11
Buenas practicas - Front end

Para tunear un checkbox o un radio con simple form tenes que ir al archivo
simple_form.rb (archivo de configuracin de Simple Form).

En la lnea 95 tenes que cambiar :nested por :inline. (Ver Imagen)

Reiniciar el server para aplicar los cambios
Ahora en el CSS tenes que poner esto:

/*
Escondemos el checkbox original y usamos el label como checkbox
mediante el background-image
*/

input[type="checkbox"] {
position: absolute;
margin-left: -9000px;
}

input[type="checkbox"] + label {
background: image-url("tu_checkbox_sprite.png") no-repeat 0px 0px;
display: inline-block;
padding-left: 25px;
}

/*
Cuando el checkbox esta chequeado modificamos el background-position del label (segn las c
*/

input[type="checkbox"]:checked + label {
background: image-url("tu_checkbox_sprite.png") no-repeat 0px -64px;
}

Se recomienda hacer los checkbox/radio en un sprite (con photoshop) y manejarlo con los
position.

Lo que estamos viendo es el label con una imagen de fondo que va a cambiar si su
checkbox o radio est en estado checked.

Podemos "ocultar el texto" con un color:transparent y usar solo una imagen de fondo,
ponerle transition, etc.

Imagenes para Wicked PDF

Introduction 12
Buenas practicas - Front end

Wicked_pdf no acepta PNG ni SVG. Debemos usar archivos .JPG para poner una
imagen en el HTML.

HTML:

= wicked_pdf_image_tag 'mi-imagen.jpg'

CSS:

background: asset-data-url("mi-imagen.jpg") no-repeat 20px 9px;

El problema es que wickedpdf no reconoce la ruta donde estn las imgenes (

assets/images ), entonces hay que usar _asset-data-url (Funcionalidad de SASS).

Ms informacin sobre asset-data-url: https://github.com/rails/sass-rails

Otra opcin es pasar las imgenes a BASE64: https://www.base64-image.de/

Buenas practicas generales

No repitas cdigo
La re utilizacin de atributos es til, siempre que sea posible mediante la agrupacin de
elementos en lugar de declarar los estilos de nuevo. Si su h1 y h2 utilizan el mismo tamao
de fuente, color y mrgenes, agruparlos mediante una coma, justo de la siguiente manera:

Introduction 13
Buenas practicas - Front end

// Do

h1,h2{
margin: 1em 0 2em 0;
font-size: 1em;
color:#000;
}

//Dont

h1{
margin: 1em 0 2em 0;
font-size: 1em;
color:#000;
}

h2{
margin: 1em 0 2em 0;
font-size: 1em;
color:#000;
}

Respetar el idioma
Sea cual sea, trata de ser consistente en el idioma usado cuando codifiques, tanto en los
nombres como en los comentarios. Esto toma especial importancia en grandes equipos o
con personas de diferentes procedencias.

Performance tips
Optimizar imgenes para su carga.
Minificacin de CSS y JS.
Utilizacin de sprites para iconos
Combinar CSS externos
Evitar el cdigo CSS y JS dentro de tu HTML.

Introduction 14