Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Buenas Practicas Front End PDF
Buenas Practicas Front End PDF
Table of Contents
Introduction 0
2
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 pestaña
Utilizar etiquetas semánticas de HTML 5
Gemas
Personalizar checkbox para Simple Form
Imagenes para Wicked PDF
Buenas practicas generales
No repitas código
Respetar el idioma
Performance tips
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 aplicación
rapidamente y ayuda a mantener la consistencia del front-end de nuestra aplicación.
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 diseño de nuestra aplicación.
Es una buena practica agregar Bitters cuando estamos arrancando con nuestra aplicación
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';
Más informacion:
Introduction 5
Buenas practicas - Front end
http://www.sitepoint.com/adding-bitters-to-bourbon-and-sass/
Clases de utilidad
Definición:
In its essence, a helper class can be described as “an independent visual behavior
rule,” meaning it’s 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 that’s 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).
También debemos asegurarnos que todas nuestras clases helpers sigan la misma
convención a la hora de nombrarlas para mantener un estilo uniforme y predecible.
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:
Introduction 6
Buenas practicas - Front end
Debemos utilizar las clases de utilidad con precaución, ya que sino nuestros elementos
pueden quedar con muchas clases de CSS. La idea no es reemplazar todo nuestro código
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) más 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
}
Más informacion:
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 más claro y semantico. También nos
ayudara a reducir los side effects de nuestro código.
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.
// 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 código CSS más modular.
Introduction 8
Buenas practicas - Front end
Más información:
Estructura de archivos
Estructurar correctamente nuestro directorio de archivos CSS nos permitirá tener un mejor
manero de nuestro código.
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 más rapido el CSS referido a un modulo.
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
Preprocesadores
Ayúdate de los pre procesadores: estas aplicaciones nos permiten escribir código 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 opción 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.
Introduction 10
Buenas practicas - Front end
Si ves que cuando achicas la resolución se hace un scroll horizontal y los divs no se ajustan
es porque te falta esta etiqueta meta en el HEAD.
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 configuración de Simple Form).
/*
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 (según 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.
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:
Introduction 13
Buenas practicas - Front end
// Do
h1,h2{
margin: 1em 0 2em 0;
font-size: 1em;
color:#000;
}
//Don´t
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 imágenes para su carga.
Minificación de CSS y JS.
Utilización de sprites para iconos
Combinar CSS externos
Evitar el código CSS y JS dentro de tu HTML.
Introduction 14