Buenas Practicas Front End

 

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 Estruc tura de archivos archivos Reset del CSS Preprocesadores Prepro cesadores Buenas pr acticas acticas HTML Respon Re sponsive sive Meta Tag Link en en nueva pestaña Utilizarr etiquetas semánticas Utiliza semánticas de HTML 5 Gemas Personalizar Perso nalizar checkbox checkbox para Simple Form Imagenes Image nes para Wicked Wicked PDF Buenas pr acticas acticas gener ales ales No repitas repitas código Respetar el idioma Performance tips

Buenas practicas CSS Bitters  - Github Sitio web web 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 archivo _variables.scss define  define las variables principales, las cuales pueden ser  modificadas para reflejar el diseño de nuestra aplicación. Es una buena practica agregar Bitters Bitters cuando  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: -font-family: 'Open Sans' Sans', , helvetica, arial, sans-serif; $base $heading-font-family: $base-font-family; $heading-font-family: $base-font-family; // Font Sizes $base-font-size: 16px; px; $base-font-size: 16 // Line height $base-line-height: 1.5 $base-line-height: 1.5; ; $heading-line-height: -line-height: 1.2; 1.2; $heading // Other Sizes $base-border-radius: -border-radius: 3px; $base $base $base-spacing: -spacing: $base $base-line-height -line-height * 1em; $small $small-spacing: -spacing: $base $base-spacing -spacing / 2; $base-z-index: -z-index: 0; $base // Colors $blue $blue: : #477dca; $dark-gray: $dark -gray: #333; $medium-gray: $medium -gray: #999; $light-gray: $light -gray: #ddd; $white: #fff; $white: $black: $black : #000; // Font Colors $base $base-font-color: -font-color: $dark $dark-gray; -gray; $action $action-color: -color: $main $main-green; -green; // Border $base-border-color: -border-color: $light $light-gray; -gray; $base $base $base-border: -border: 1px solid $base-border-color; $base-border-color; // Background Colors $base $base-background-color: -background-color: #fff; $secondary-background-color: $secondary -background-color: tint($base tint($base-border-color, -border-color, 75 75%); %); // Forms $form $form-box-shadow: -box-shadow: inset 0 1px 3px rgba(#000, rgba(#000, 0.06); $form-box-shadow-focus: $form -box-shadow-focus: $form $form-box-shadow, -box-shadow, 0 0 5px adjust-color($action adjust-color($action-color, -color, $lightness $lightness: : // Animations $base-duration: 150ms; ms; $base-duration: 150 $base-timing: ease; $base-timing: // Buttons $all-buttons: -buttons: 'button'; 'button'; $all

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 Bootstrap como  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.s archivo  _helper.scss css.. 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. El concepto detras de las clases de utilidad es el de Inmutabilidad 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 !important  a las declaraciones de estilos de las mismas. Ejemplo: 10px px !important;} //Forzamos la inmutabilidad mediante el !important .mt10{margin-top: 10

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; 10px;

   

}

}

Do //HTML .user-avatar.mt10 //CSS 10px px !important; } .mt10{ margin-top: 10 .user-avatar{  

//. user-avatar css

}

Más informacion: Código DRY utilizando helpers (muy interesante la discución 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-helperclasses-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 BEM  es una de las tantas convenciones que existen para nombrar a nuestras clases CSS.. 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. Ejemplo de 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: 10 10px; px;

} .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  ( .user-avatar ). ). Esto nos permite generar un código CSS más modular. En el caso de querer generar una modificación al bloque usamos un modifier (.user-avatar( .user-avatar-big). -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 más modular. Más información: Reducir side-effects en CSS mediante BEM: http://philipwalton.com/articles/side-effects-incss/ Introducción a BEM: https://css-tricks.com/bem-101/ 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 código.  A la hora de eliminar o modificar un modulo modu lo del front-end p podemos odemos 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. 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-asass-project Podemos adoptar la siguiente estructura básica para los nuevos proyectos: styles  

| base base (Bitters  (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 base colocamos  colocamos todos nuestros estilos de elementos generales. Podemos usar los archivos que nos provee Bitters Bitters como  como organización o sino crear nuestros propios archivos de reset. En la carpeta layout layout colocamos  colocamos nuestros estilos referidos a sectores especiales de nuestra aplicación, 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 patterns colocamos  colocamos todos los modulos que se repiten a lo largo de la aplicación. Es importante reconocer aquellos módulos 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 indice al  al principio de application.css que 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 Resetea 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 más comunes. normalize.css.. Hay algunos librerias de reset como lo es normalize.css

Preprocesadores  Ayúdate de los pre procesadores: procesado res: estas aplicaciones nos permite permiten n 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, SASS, STYLUS o LESS STYLUS o LESS..

Buenas practicas HTML Responsive Meta Tag

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.  

Link en nueva pestaña   Hola soy un link

Utilizar etiquetas semánticas de HTML 5 Las etiquetas semánticas estructurales nos estructurales nos sirven para que los motores de búsqueda sepa con exactitud qué partes de su contenido corresponden a cada una de las partes típicas de un sitio. Generalmente, en cualquier documento tenemos una cabecera, un cuerpo y un pie de página, 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 simple_form.rb  (archivo de configuración de Simple Form). En la línea 95 tenes que cambiar :nested por :inline. :inline. (Ver Imagen) Reiniciar el server para aplicar los cambios  Ahora en el CSS tenes tene s 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. image-url("tu_checkbox_sprite.png") png") no-repeat 0px 0px;

 

display: inline-block;

 

padding-left: 25px;

  }   /*  

Cuando el checkbox esta chequeado modificamos el background-position del label */

  input[type="checkbox"]:checked + label {  

background: image-url("tu_checkbox_sprite. image-url("tu_checkbox_sprite.png") png") no-repeat 0px -64px;

  }

Se recomienda hacer los checkbox/radio en un sprite sprite (con  (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

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

= wicked_pdf_image_tag 'mi-imagen.jpg'

CSS:: CSS  

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

El problema es que wicked pdf no reconoce la ruta donde están las imágenes  (  assets/images ), entonces hay que usar _asset-data-url  (Funcionalidad  (Funcionalidad de SASS). Más información sobre asset-data-url: https://github.com/rails/sass-rails Otra opción es pasar las imágenes a BASE64: BASE64: https://www.base64-image.de/ https://www.base64-image.de/  

Buenas practicas generales No repitas código   La re utilización de atributos es atributos es útil, siempre que sea posible mediante la agrupación de elementos en lugar de declarar los estilos de nuevo. Si su h1 y h2 utilizan el mismo tamaño de fuente, color y márgenes, 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;

 

}

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