mminguezz/guia de estilo less

## guia de estilo less
h1. Estilo de programación

> Este docuemento esta en desarrollo

Estas reglas pretenden definir el formato y estilo aplicable a los archivos HTML y CSS.
Su objetivo es mejorar la colaboración, la calidad del código y de apoyo para nuevos desarrollos.
Las reglas referentes a CSS estan preparadas pensando en el uso de preprocesadores como LESS ya que los archivos CSS que se usen en producción han de estar minificados.

h2. coding styleguide

h3. Reglas generales

h4. *Indentacion*
La indentacion sera de dos espacios, no se usaran tabs u en ningun caso un mix de tabs y espacios.

<pre><code class="css">
.foo{
  display:block;
}
</code></pre>

<pre><code class="html">
<div class="foo">
  <h1>lorem ipsum dolor</h1>
</div>
</code></pre>

TIP: Si usas sublimetext2 puedes configurarlo añadiendo a las settings de usuario
<pre><code>
"tab_size": 2,
"translate_tabs_to_spaces": true,
</code></pre>

h4. *Mayúsculas*
Escribe siempre en minusculas para elementos, nombres, atributos y valores de HTML ademas de selectores, propiedades y valores de CSS.
La excepción de textos y cadenas que requieran mayusculas como por ejemplo "text/CDATA".

<pre><code>
YEP
[if (gt IE 9)|!(IE)]
<img src="okn-logo.png" alt="OKN Corporate logo">
color: #c3c3c3;

NOPE
<A HREF="/">Home</A>
color: #E5E5E5;
</pre></code>

h4. *Whitespace*
Eliminar espacios finales blancos. Esto es complicado de mantener conscientemente, usa plugins o complementos para tu IDE que te limpie los espacios finales.

>TIP: Si usas sublimetext2 puedes configurarlo añadiendo a las settings de usuario
<pre><code>
  "trim_automatic_white_space": true,
  "trim_trailing_white_space_on_save": true,
</pre></code>

h4. *Codificación UTF-8*
Asegúrese de que su editor utiliza UTF-8 como codificación de caracteres.
Comprueba que las paginas HTML tengan el meta dentro del "head"
<pre><code>
<meta charset="utf-8">
</pre></code>
No es necesario especificarlo en las hojas de estilo ya que ya que se asume UTF-8

h4. *Comentarios*
Comenta el codigo siempre que sea posible y necesario.
Usalos para explicar el código.

> :P "Dentro de unos dias te acordaras de esto que digo"

Es recomendable añadir un comentario de cabecera del archivo para explicar el objetivo del archivo y para identificar las marcas de acción usadas en el documento.

Los comentarios de HTML, procuraremos evitarlos siempre y cuando no exista un proceso de limpieza antes de poner los archivos en producción. Si estas incluyendo HTML dentro de un archivo con extensión .php o .js  usa los comentarios de ese lenguaje


h4. *Usa marcas de acción*
Usa "marcas" de accion para identificar zonas del codigo donde se necesita hacer una tarea.
Estas marcas han de ir siempre comentadas.
A medida que se completen las tareas deben de quitarse las marcas.
Un archivo finalizado no deberia de contener marcas.
Identifica al comienzo del documento las marcas usadas.
Como por ejemplo:
<pre><code>
  [TEXT] Zonas donde hay que incluir textos o traducciones
  [CONF] Elementos para ser configurados o parametros por definir
  [TODO] Pendiente de hacer una cierta tarea.
</pre></code>

h4. *Separacion de Conceptos*
Usa cada lenguaje apropiadamente.
Has de mantener la estructura, el estilo y el comportamiento separados entre si y mantener la independencia siempre que sea posible.

* HTML:         para la la estructura
* CSS:          para el estilo
* JavaScript:   para el comportamiento


h3. HTML

h4. *Tipo de docuemento*
Usa por defecto la definicion HTML5
<pre><code>
<!DOCTYPE html>
</pre></code>

h4. *HTML valido y semántico*
Usa HTML valido deacuerdo con la especificacion del documento
Escribe  `<br>` y no `<br />`
Usa elementos semanticos, siempre que sea posible*, usa `<p>` cuando sea un parrafo, usa `a` cuando sea un enlace, etc.
Proporciona contenido alternativo siempres que sea posible, no olvides `alt` y `title` en imagenes y enlaces.
Nombra los atributos de los elementos adecuadamente.

<pre><code>
YEP
<a href="/home" title="Go OKN home page" data-icon="home">

NOPE
<a href="/home" icon="home">
</pre></code>

> NOTAS:
> *A dia de hoy la plataforma no admite los nuevos elementos de la especificacion HTML5, por la necesidad de compatibilidad con navegadores que no lo soportan

h4. *Formateado*
Usa una nueva línea para cada bloque, lista o elemento de la tabla y tabula el elemento hijo.
Cada elemento bloque*, lista o elemento de la tabla debe de ir en una nueva línea.

<pre><code>
<blockquote>
  <p>Dando <em>formateo</em>, general.</p>
</blockquote>

<ul>
  <li>Sabado</li>
  <li>Domingo</li>
</ul>
</pre></code>

> NOTAS:
> *todos los elementos que por defecto, idependientemente del CSS que se aplique, que tengan asignado `display: block;`

h4. *Comillas*
El marcado de comillas en HTML ha de ser Doble comilla ` " `

<pre><code>
YEP
<img src="okn-logo.png" alt="OKN Corporate logo">

NOPE
<img src='okn-logo.png' alt='OKN Corporate logo'>
</pre></code>


h3. CSS

h4. *"Menos es mas ( fácil? )"*

La gracia de CSS es que las propiedades se heredan de padres a hijos.
Esto hace que llegues a odiarlo si empiezas a sobreescribir propiedades.
Cuanto mas especificas (mas anidamiento de selectores) mas complicado se vuelve y terminas usando "!important" y ya estas vendido.

> El selector mas largo del 2014 de entre los 1000 primeros sites del ranking de Alexa
> .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey
> fuente: "The 2014 CSS Report": [https://web.archive.org/web/20160304013036/http://reports.quickleft.com/css]

No queremos batir ningun "record" de selectores anidados.
Cuando tengamos un conflicto de propiedades la solucion es quitar clases.
Hay que identificar la clase que crea el conflicto del elemento y cambiarla por otra con las propiedades adecuadas.
Si el conflicto es producido por la herencia de un elemento podemos redefinir la propiedad con una de uso global especifica para una propiedad deberia solucionarse.
Si el conflicto es mucho mas especifico, primero intentaremos solucionarlo intentando quitar las clases o las propiedades que crean el conflicto y despues pensaremos en añadir nuevas clases o propiedades que redefinan.
Piensa en redefinir y no en sobreescibir a base de anidacion.


h4. *CSS Valido*
Escribe css valido.
Siempre que no se pueda evitar el uso de hacks o de prefijos, es preferible usar mixins o extends para propiciar un mejor mantenimiento cuando se pueda hacer valido.

<pre><code>
.border-radius (@radius: 3px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.button {
  .border-radius( 5px );
}

</pre></code>

Siguiendo este consejo si un dia '-webkit-border-radius: @radius;' ya no es necesario por que los navegadores dejan de usarla, con quitarla del mixin y compilar el codigo habremos limpiado todo el css.


h4. *Nombrando clases* ( "Ver BEM":https://okn.me/projects/okn-reestructuracion-proy4/wiki/C%C3%B3mo_maquetar_en_BEM )

Usa nombres de clase lo mas generico posible sin que sean abstractos.
Crea los nombre lo mas corto posible pero tan largos como sea necesario.

El idioma de los selectores es unico, no mezcles selectores en ingles y castellano.
No hagas "sinonimos" como crear la misma clase en ingles anglosajon y americano o crear selectores en plural, con prefijo, conjugado... decidete por uno de ellos.

Esto no quiere decir que cuando varios selectores con las mismas propiedades los desagrupes.
Solo cuando es lo mismo y significa lo mismo
<pre><code>
NOPE
.disable,
.disabled,
.is-disable,
.not-enabled {}


YEP
.is-disable {}

// selectores usados para diferentes cosas que tienen las mismas propiedades
.text-ok,
.title-sidebar,
.menu:last-child{}

</pre></code>


Manten la anidación lo mas corta posible y no uses elementos html junto con clases, son innecesarios.

<pre><code>
NOPE
ul li {}
ul li.item {}

YEP
li{}
ul .item {}
</pre></code>


Puedes ayudarte de clases 'helper' para definir los estilos de los elementos sin necesidad de generar nuevas clases.
<pre><code>
.prop-box-error {
  background-color: red;
  color: white;
}
</pre></code>

Procura no usar ID en tu hoja de estilos, es mejor practica usar una clase especifica y unica.

No definas propiedades a selectores de clase que son usadas en JavaScript, usa un prefijo para las clases de JavaScript para mantener la presentacion separada de la funcionalidad.
Por ejemplo, usa la clase ` tab ` para dar el estilo y la clase ` js-tab ` para dotarla de funcionalidad con JavaScript.

[TODO] Añadir ejemplos segun la definicion de BEM  de la OKN-v2

generico
  .button

especifico
  .button-login

Presentacion ( no usar, es mejor el uso de estado )
  .button-red

estado
  .button-error

Helper de estado
  .button.error

Sin sentido ( procurar no usar )
  .year-1900

Globales plataforma
  .global-text-error
  .prop-uppercase


h4. *IDs y Clases prohibidas*
Dentro de la plataforma estas clases son usadas por los componentes y tienen sus propios estilos.
No hay que sobreescribir estas clases para cambiar el estilo de los componentes habra que hacer un tema de componentes
 .button
 .select
 ...
 [TODO] Listar las clases conocidas

h4. *Propiedades "acortadas"*
No uses propiedades acortadas si no especificas todos los parametros ya que se sobreescriben el resto de propiedades no definidas.
Usa ` background-color: red; ` en vez de ` background: red; `.
El uso correcto de la propiedad acortada del ejemplo anterior seria de la siguiente manera:
<pre><code>
background: none repeat scroll 0 0 red;
</pre></code>

Por el contrario usa la propiedad acortada siempre que tengas que definir varias propiedades
<pre><code>
NOPE
background-repeat: no-repeat;
background-position: 10px 5px;
background-color:red;

YEP
background: none no-repeat scroll 10px 5px red;
</pre></code>

- ¿de verdad importa?
La verdad es que si y mucho.
- pero.. si nunca me ha dado problemas.
Eso es por que todavia puedes mejorar tus hojas de estilo un poco mas.

Como sabemos en CSS la mayoria de propiedades que heredan de padres a hijos, usando la propiedad acortada podemos sobreescribir propiedades sin darnos cuenta, ya que el navegador añade las propiedades no definidas con los valores que el considera que son por defecto. En general son muy parecidas en todos los navegadores... pero no iguales, por eso se crearon los reset.css o normalize.css para empezar con el mismo documento en blanco en todos los navegadores. (esto no solucuiona el problema de las propiedades acortadas)
Ademas de esto muchas reglas de CSS que admiten el valor de 'inherit' que hace que use el mismo valor que su padre, usando propiedades acortadas puede influir en elementos anidados.


h4. *Valores*
No uses unidades cuando la propiedad tenga un valor 0
Usa a notacion hexadecimal de 3 valores cuando sea posible;

<pre><code>
NOPE
.item {
  padding: 0px;
  color: #cc0000;
}

YEP
.item {
  padding: 0;
  color: #c00;
}

</pre></code>

h4. *Formateado*

*Orden*: Seria recomendable ordenar las propiedades de los selectores por orden alfabético, pero es demasiado costoso para el beneficio que da, pero es necesario para ayudar a su posterior mantenimiento agrupar las propiedades por tipo, es decir, todos los "background" juntos, los "border" juntos, etc. los "vendor prefixes" van siempre por encima de la declaración sin ellos.

*Declaraciones*:
* Entre el selector de clase y la llave la  deberá haber un espacio y no habra un salto de linea
* Entre la propiedad y el valor después de los dos puntos deberá haber un espacio.
* Siempre acabaremos las declaraciones con "punto y coma"
* Varios selectores con las mismas con el mismo bloque de propiedades estaran separados por un salto de linea
* Si es necesario usar comillas usaremos las simples y no dobles.


<pre><code>
.global-class,
.myclass {
  background-color: #fabada;
  background.repeat: no-repeat;
  border: 1px solid #333;
  border-bottom-colors: #111;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  color: black;
  font-family: 'open sans', arial, sans-serif;
}
</pre></code>


h4. *!important*
NO usare !important, excepto cuando sea importante
[TODO] Cuando es importante?

h4. *Organizacion de archivos*
Los archivos css se deben localizar el directorio css del theme, o en un archivo style.css en el directorio raiz. (solo por tenerlo localizado)
Se deberia de usar un solo archivo que genera el theme completo.
Se usaran otros archivos para vistas o estados particulares (si por extension no compensa tenerlos en un solo archivo) como por ejemplo:
* Una vista tan personalizada que use un layout donde no usamos casi ninguna de las clases ya definidas
* Hojas "media", como pueda ser la de impresion "print.css" o "mobile.css" para el "responvive" del sitio
* Caso particular de LESS, SASS u otros preprocesadores (ver mas abajo)

En el caso de que el numero de hojas crezca demasiado se deberan agrupar en directorios que identifiquen su uso.
* media ( para hojas relacionadas con resoluciones, impresion, etc )
* views ( para vistas de pagina con estilos diferentes )
* modules ( para modulos internos de alguna vistas y como puede ser un "calendario", un visor de recursos... )


h3. JavaScript

[TODO]

h3. PHP

[TODO]

h3. JSON

[TODO]

h3. Preprocesadores CSS (LESS)

Los preprocesadores son una gran herramienta para generar CSS, nos facilitan el uso de variables, condicionales, funciones... pero has de mantener siempre presente cuando los uses el código que vas a generar. Es recomendable, sobre todo cuando empiezas a usarlos, compilar sin minificar y revisar el CSS generado, encontraras cosas que tu nunca habrias hecho y ademas te ayudara a entender mejor el funcionamiento de ciertas funcionalidades.

> Un gran poder conlleva una gran responsabilidad
>  -Tío Ben a Spiderman

h4. *Mixins*
Los mixins usan parametros.
Cuando un mixin no use parametros debera de usarse una variable o un extend para no crear duplididad de código, en LESS no nos damos cuenta pero al CSS resultante después de la compilación si le afecta, además queda feo :)

h4. *Extend*

Se usa como un mixin sin parametros pero en vez de añadir las propiedades a un selector lo que hace es agrupar los selectores con las mismas propiedades

[TODO] ver como hacer el %placeholder de SASS en LESS, la mejor opcion parece ser hacer clases en una hoja y pasar la como import por referencia :(

h4. *Orden*

El orden adecuado es: extend + regular propiedades + mixins + elementos anidados + elementos anidados padres

<pre><code>
.item {
  &:extend(.it);

  color: green;
  display: relative;
  magin-bottom: 10px;

  .border-radius( 10px );

  h3 {
    color: olive;
  }

  .box &{
    padding: 10px;
  }
}
</pre></code>

h4. *3 niveles*
Has de procurar evitar anidamientos de mas de 3 niveles, siempre hay excepciones pero si recurrentemente te saltas esta regla es que "algo huele mal"

<pre><code>
.menu {
  .nav {
    .item {
      // no more! .link{} Ya no podria ponerlo.
    }
  }
}
</pre></code>
-pero...
No hay peros, se puede hacer perfectamente. Por eso usaremos BEM o algun derivado de BEM

<pre><code>
.menu{}
.menu-nav{}
.nav-item{}
.nav-link{}
</pre></code>


h4. *Incluye una cabecera*
Con indice y todas las dependencias y functions

h4. *Unidades y valores*
Si vas a operar con valores que sean sin unidades de este modo

<pre><code>
@base: 5;
@value: @base * 5;

// Yep
@padding: @value * 1px;


// Nope
@padding: @value + px;
</pre></code>

h4. *Comentarios*
Generoso con los comentarios, desaparecen cuando se crea el css minificado.

<pre><code>
/**
 * Helper class to truncate and add ellipsis to a string too long for it to fit
 * on a single line.
 * 1. Prevent content from wrapping, forcing it on a single line.
 * 2. Add ellipsis at the end of the line.
 * /
.ellipsis {
  white-space: nowrap; /* 1 * /
  text-overflow: ellipsis; /* 2 * /
  overflow: hidden;
}
</pre></code>


h4. *Variables para todo*
Para todo lo que se pueda parametrizar usa variables (colores, espacios, ....)


h4. *Directorios y archivos*
[TODO]
archivo principal.
carpeta parcials


h4. *Compilado*
[TODO]
Siemprte que sea posible y necesario generaremos un solo css para usarlo en las vistas.
Generaremos adicionalmente cada parcial por separado para que puedan ser usados de manera independiente en las vistas de versiones anteriores cuando sea necesario.


h2. visual styleguide de *OKN UI*

> Estamos haciendo el "kitchen sink".

En esta guia esta documentado los estilos usados en OKN con sus respectivos ejemplos HTML para que puedan ser reutilizados en la plataforma de manera rapida y sencilla.

"kitchen sink":https://docdes.cloud.okn.me/v2/


h3. Como documentar "OKN UI"

Para crear una documentación Markdown
[TODO] con comentaros escritos en MARKDOWN
	h1. Estilo de programación

	> Este docuemento esta en desarrollo

	Estas reglas pretenden definir el formato y estilo aplicable a los archivos HTML y CSS.
	Su objetivo es mejorar la colaboración, la calidad del código y de apoyo para nuevos desarrollos.
	Las reglas referentes a CSS estan preparadas pensando en el uso de preprocesadores como LESS ya que los archivos CSS que se usen en producción han de estar minificados.

	h2. coding styleguide

	h3. Reglas generales

	h4. Indentacion
	La indentacion sera de dos espacios, no se usaran tabs u en ningun caso un mix de tabs y espacios.

	<pre><code class="css">
	.foo{
	display:block;
	}
	</code></pre>

	<pre><code class="html">
	<div class="foo">
	<h1>lorem ipsum dolor</h1>
	</div>
	</code></pre>

	TIP: Si usas sublimetext2 puedes configurarlo añadiendo a las settings de usuario
	<pre><code>
	"tab_size": 2,
	"translate_tabs_to_spaces": true,
	</code></pre>

	h4. Mayúsculas
	Escribe siempre en minusculas para elementos, nombres, atributos y valores de HTML ademas de selectores, propiedades y valores de CSS.
	La excepción de textos y cadenas que requieran mayusculas como por ejemplo "text/CDATA".

	<pre><code>
	YEP
	[if (gt IE 9)\|!(IE)]
	<img src="okn-logo.png" alt="OKN Corporate logo">
	color: #c3c3c3;

	NOPE
	<A HREF="/">Home</A>
	color: #E5E5E5;
	</pre></code>

	h4. Whitespace
	Eliminar espacios finales blancos. Esto es complicado de mantener conscientemente, usa plugins o complementos para tu IDE que te limpie los espacios finales.

	>TIP: Si usas sublimetext2 puedes configurarlo añadiendo a las settings de usuario
	<pre><code>
	"trim_automatic_white_space": true,
	"trim_trailing_white_space_on_save": true,
	</pre></code>

	h4. Codificación UTF-8
	Asegúrese de que su editor utiliza UTF-8 como codificación de caracteres.
	Comprueba que las paginas HTML tengan el meta dentro del "head"
	<pre><code>
	<meta charset="utf-8">
	</pre></code>
	No es necesario especificarlo en las hojas de estilo ya que ya que se asume UTF-8

	h4. Comentarios
	Comenta el codigo siempre que sea posible y necesario.
	Usalos para explicar el código.

	> :P "Dentro de unos dias te acordaras de esto que digo"

	Es recomendable añadir un comentario de cabecera del archivo para explicar el objetivo del archivo y para identificar las marcas de acción usadas en el documento.

	Los comentarios de HTML, procuraremos evitarlos siempre y cuando no exista un proceso de limpieza antes de poner los archivos en producción. Si estas incluyendo HTML dentro de un archivo con extensión .php o .js usa los comentarios de ese lenguaje


	h4. Usa marcas de acción
	Usa "marcas" de accion para identificar zonas del codigo donde se necesita hacer una tarea.
	Estas marcas han de ir siempre comentadas.
	A medida que se completen las tareas deben de quitarse las marcas.
	Un archivo finalizado no deberia de contener marcas.
	Identifica al comienzo del documento las marcas usadas.
	Como por ejemplo:
	<pre><code>
	[TEXT] Zonas donde hay que incluir textos o traducciones
	[CONF] Elementos para ser configurados o parametros por definir
	[TODO] Pendiente de hacer una cierta tarea.
	</pre></code>

	h4. Separacion de Conceptos
	Usa cada lenguaje apropiadamente.
	Has de mantener la estructura, el estilo y el comportamiento separados entre si y mantener la independencia siempre que sea posible.

	* HTML: para la la estructura
	* CSS: para el estilo
	* JavaScript: para el comportamiento


	h3. HTML

	h4. Tipo de docuemento
	Usa por defecto la definicion HTML5
	<pre><code>
	<!DOCTYPE html>
	</pre></code>

	h4. HTML valido y semántico
	Usa HTML valido deacuerdo con la especificacion del documento
	Escribe `<br>` y no `<br />`
	Usa elementos semanticos, siempre que sea posible*, usa `<p>` cuando sea un parrafo, usa `a` cuando sea un enlace, etc.
	Proporciona contenido alternativo siempres que sea posible, no olvides `alt` y `title` en imagenes y enlaces.
	Nombra los atributos de los elementos adecuadamente.

	<pre><code>
	YEP
	<a href="/home" title="Go OKN home page" data-icon="home">

	NOPE
	<a href="/home" icon="home">
	</pre></code>

	> NOTAS:
	> *A dia de hoy la plataforma no admite los nuevos elementos de la especificacion HTML5, por la necesidad de compatibilidad con navegadores que no lo soportan

	h4. Formateado
	Usa una nueva línea para cada bloque, lista o elemento de la tabla y tabula el elemento hijo.
	Cada elemento bloque*, lista o elemento de la tabla debe de ir en una nueva línea.

	<pre><code>
	<blockquote>
	<p>Dando <em>formateo</em>, general.</p>
	</blockquote>

	<ul>
	<li>Sabado</li>
	<li>Domingo</li>
	</ul>
	</pre></code>

	> NOTAS:
	> *todos los elementos que por defecto, idependientemente del CSS que se aplique, que tengan asignado `display: block;`

	h4. Comillas
	El marcado de comillas en HTML ha de ser Doble comilla ` " `

	<pre><code>
	YEP
	<img src="okn-logo.png" alt="OKN Corporate logo">

	NOPE
	<img src='okn-logo.png' alt='OKN Corporate logo'>
	</pre></code>


	h3. CSS

	h4. "Menos es mas ( fácil? )"

	La gracia de CSS es que las propiedades se heredan de padres a hijos.
	Esto hace que llegues a odiarlo si empiezas a sobreescribir propiedades.
	Cuanto mas especificas (mas anidamiento de selectores) mas complicado se vuelve y terminas usando "!important" y ya estas vendido.

	> El selector mas largo del 2014 de entre los 1000 primeros sites del ranking de Alexa
	> .ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey
	> fuente: "The 2014 CSS Report": [https://web.archive.org/web/20160304013036/http://reports.quickleft.com/css]

	No queremos batir ningun "record" de selectores anidados.
	Cuando tengamos un conflicto de propiedades la solucion es quitar clases.
	Hay que identificar la clase que crea el conflicto del elemento y cambiarla por otra con las propiedades adecuadas.
	Si el conflicto es producido por la herencia de un elemento podemos redefinir la propiedad con una de uso global especifica para una propiedad deberia solucionarse.
	Si el conflicto es mucho mas especifico, primero intentaremos solucionarlo intentando quitar las clases o las propiedades que crean el conflicto y despues pensaremos en añadir nuevas clases o propiedades que redefinan.
	Piensa en redefinir y no en sobreescibir a base de anidacion.


	h4. CSS Valido
	Escribe css valido.
	Siempre que no se pueda evitar el uso de hacks o de prefijos, es preferible usar mixins o extends para propiciar un mejor mantenimiento cuando se pueda hacer valido.

	<pre><code>
	.border-radius (@radius: 3px) {
	-webkit-border-radius: @radius;
	-moz-border-radius: @radius;
	border-radius: @radius;
	}

	.button {
	.border-radius( 5px );
	}

	</pre></code>

	Siguiendo este consejo si un dia '-webkit-border-radius: @radius;' ya no es necesario por que los navegadores dejan de usarla, con quitarla del mixin y compilar el codigo habremos limpiado todo el css.


	h4. Nombrando clases ( "Ver BEM":https://okn.me/projects/okn-reestructuracion-proy4/wiki/C%C3%B3mo_maquetar_en_BEM )

	Usa nombres de clase lo mas generico posible sin que sean abstractos.
	Crea los nombre lo mas corto posible pero tan largos como sea necesario.

	El idioma de los selectores es unico, no mezcles selectores en ingles y castellano.
	No hagas "sinonimos" como crear la misma clase en ingles anglosajon y americano o crear selectores en plural, con prefijo, conjugado... decidete por uno de ellos.

	Esto no quiere decir que cuando varios selectores con las mismas propiedades los desagrupes.
	Solo cuando es lo mismo y significa lo mismo
	<pre><code>
	NOPE
	.disable,
	.disabled,
	.is-disable,
	.not-enabled {}


	YEP
	.is-disable {}

	// selectores usados para diferentes cosas que tienen las mismas propiedades
	.text-ok,
	.title-sidebar,
	.menu:last-child{}

	</pre></code>


	Manten la anidación lo mas corta posible y no uses elementos html junto con clases, son innecesarios.

	<pre><code>
	NOPE
	ul li {}
	ul li.item {}

	YEP
	li{}
	ul .item {}
	</pre></code>


	Puedes ayudarte de clases 'helper' para definir los estilos de los elementos sin necesidad de generar nuevas clases.
	<pre><code>
	.prop-box-error {
	background-color: red;
	color: white;
	}
	</pre></code>

	Procura no usar ID en tu hoja de estilos, es mejor practica usar una clase especifica y unica.

	No definas propiedades a selectores de clase que son usadas en JavaScript, usa un prefijo para las clases de JavaScript para mantener la presentacion separada de la funcionalidad.
	Por ejemplo, usa la clase ` tab ` para dar el estilo y la clase ` js-tab ` para dotarla de funcionalidad con JavaScript.

	[TODO] Añadir ejemplos segun la definicion de BEM de la OKN-v2

	generico
	.button

	especifico
	.button-login

	Presentacion ( no usar, es mejor el uso de estado )
	.button-red

	estado
	.button-error

	Helper de estado
	.button.error

	Sin sentido ( procurar no usar )
	.year-1900

	Globales plataforma
	.global-text-error
	.prop-uppercase


	h4. IDs y Clases prohibidas
	Dentro de la plataforma estas clases son usadas por los componentes y tienen sus propios estilos.
	No hay que sobreescribir estas clases para cambiar el estilo de los componentes habra que hacer un tema de componentes
	.button
	.select
	...
	[TODO] Listar las clases conocidas

	h4. Propiedades "acortadas"
	No uses propiedades acortadas si no especificas todos los parametros ya que se sobreescriben el resto de propiedades no definidas.
	Usa ` background-color: red; ` en vez de ` background: red; `.
	El uso correcto de la propiedad acortada del ejemplo anterior seria de la siguiente manera:
	<pre><code>
	background: none repeat scroll 0 0 red;
	</pre></code>

	Por el contrario usa la propiedad acortada siempre que tengas que definir varias propiedades
	<pre><code>
	NOPE
	background-repeat: no-repeat;
	background-position: 10px 5px;
	background-color:red;

	YEP
	background: none no-repeat scroll 10px 5px red;
	</pre></code>

	- ¿de verdad importa?
	La verdad es que si y mucho.
	- pero.. si nunca me ha dado problemas.
	Eso es por que todavia puedes mejorar tus hojas de estilo un poco mas.

	Como sabemos en CSS la mayoria de propiedades que heredan de padres a hijos, usando la propiedad acortada podemos sobreescribir propiedades sin darnos cuenta, ya que el navegador añade las propiedades no definidas con los valores que el considera que son por defecto. En general son muy parecidas en todos los navegadores... pero no iguales, por eso se crearon los reset.css o normalize.css para empezar con el mismo documento en blanco en todos los navegadores. (esto no solucuiona el problema de las propiedades acortadas)
	Ademas de esto muchas reglas de CSS que admiten el valor de 'inherit' que hace que use el mismo valor que su padre, usando propiedades acortadas puede influir en elementos anidados.


	h4. Valores
	No uses unidades cuando la propiedad tenga un valor 0
	Usa a notacion hexadecimal de 3 valores cuando sea posible;

	<pre><code>
	NOPE
	.item {
	padding: 0px;
	color: #cc0000;
	}

	YEP
	.item {
	padding: 0;
	color: #c00;
	}

	</pre></code>

	h4. Formateado

	Orden: Seria recomendable ordenar las propiedades de los selectores por orden alfabético, pero es demasiado costoso para el beneficio que da, pero es necesario para ayudar a su posterior mantenimiento agrupar las propiedades por tipo, es decir, todos los "background" juntos, los "border" juntos, etc. los "vendor prefixes" van siempre por encima de la declaración sin ellos.

	Declaraciones:
	* Entre el selector de clase y la llave la deberá haber un espacio y no habra un salto de linea
	* Entre la propiedad y el valor después de los dos puntos deberá haber un espacio.
	* Siempre acabaremos las declaraciones con "punto y coma"
	* Varios selectores con las mismas con el mismo bloque de propiedades estaran separados por un salto de linea
	* Si es necesario usar comillas usaremos las simples y no dobles.


	<pre><code>
	.global-class,
	.myclass {
	background-color: #fabada;
	background.repeat: no-repeat;
	border: 1px solid #333;
	border-bottom-colors: #111;
	-moz-border-radius: 4px;
	-webkit-border-radius: 4px;
	border-radius: 4px;
	color: black;
	font-family: 'open sans', arial, sans-serif;
	}
	</pre></code>



	h4. !important
	NO usare !important, excepto cuando sea importante
	[TODO] Cuando es importante?

	h4. Organizacion de archivos
	Los archivos css se deben localizar el directorio css del theme, o en un archivo style.css en el directorio raiz. (solo por tenerlo localizado)
	Se deberia de usar un solo archivo que genera el theme completo.
	Se usaran otros archivos para vistas o estados particulares (si por extension no compensa tenerlos en un solo archivo) como por ejemplo:
	* Una vista tan personalizada que use un layout donde no usamos casi ninguna de las clases ya definidas
	* Hojas "media", como pueda ser la de impresion "print.css" o "mobile.css" para el "responvive" del sitio
	* Caso particular de LESS, SASS u otros preprocesadores (ver mas abajo)

	En el caso de que el numero de hojas crezca demasiado se deberan agrupar en directorios que identifiquen su uso.
	* media ( para hojas relacionadas con resoluciones, impresion, etc )
	* views ( para vistas de pagina con estilos diferentes )
	* modules ( para modulos internos de alguna vistas y como puede ser un "calendario", un visor de recursos... )


	h3. JavaScript

	[TODO]

	h3. PHP

	[TODO]

	h3. JSON

	[TODO]

	h3. Preprocesadores CSS (LESS)

	Los preprocesadores son una gran herramienta para generar CSS, nos facilitan el uso de variables, condicionales, funciones... pero has de mantener siempre presente cuando los uses el código que vas a generar. Es recomendable, sobre todo cuando empiezas a usarlos, compilar sin minificar y revisar el CSS generado, encontraras cosas que tu nunca habrias hecho y ademas te ayudara a entender mejor el funcionamiento de ciertas funcionalidades.

	> Un gran poder conlleva una gran responsabilidad
	> -Tío Ben a Spiderman

	h4. Mixins
	Los mixins usan parametros.
	Cuando un mixin no use parametros debera de usarse una variable o un extend para no crear duplididad de código, en LESS no nos damos cuenta pero al CSS resultante después de la compilación si le afecta, además queda feo :)

	h4. Extend

	Se usa como un mixin sin parametros pero en vez de añadir las propiedades a un selector lo que hace es agrupar los selectores con las mismas propiedades

	[TODO] ver como hacer el %placeholder de SASS en LESS, la mejor opcion parece ser hacer clases en una hoja y pasar la como import por referencia :(

	h4. Orden

	El orden adecuado es: extend + regular propiedades + mixins + elementos anidados + elementos anidados padres

	<pre><code>
	.item {
	&:extend(.it);

	color: green;
	display: relative;
	magin-bottom: 10px;

	.border-radius( 10px );

	h3 {
	color: olive;
	}

	.box &{
	padding: 10px;
	}
	}
	</pre></code>

	h4. 3 niveles
	Has de procurar evitar anidamientos de mas de 3 niveles, siempre hay excepciones pero si recurrentemente te saltas esta regla es que "algo huele mal"

	<pre><code>
	.menu {
	.nav {
	.item {
	// no more! .link{} Ya no podria ponerlo.
	}
	}
	}
	</pre></code>
	-pero...
	No hay peros, se puede hacer perfectamente. Por eso usaremos BEM o algun derivado de BEM

	<pre><code>
	.menu{}
	.menu-nav{}
	.nav-item{}
	.nav-link{}
	</pre></code>


	h4. Incluye una cabecera
	Con indice y todas las dependencias y functions

	h4. Unidades y valores
	Si vas a operar con valores que sean sin unidades de este modo

	<pre><code>
	@base: 5;
	@value: @base * 5;

	// Yep
	@padding: @value * 1px;


	// Nope
	@padding: @value + px;
	</pre></code>

	h4. Comentarios
	Generoso con los comentarios, desaparecen cuando se crea el css minificado.

	<pre><code>
	/**
	* Helper class to truncate and add ellipsis to a string too long for it to fit
	* on a single line.
	* 1. Prevent content from wrapping, forcing it on a single line.
	* 2. Add ellipsis at the end of the line.
	* /
	.ellipsis {
	white-space: nowrap; /* 1 * /
	text-overflow: ellipsis; /* 2 * /
	overflow: hidden;
	}
	</pre></code>


	h4. Variables para todo
	Para todo lo que se pueda parametrizar usa variables (colores, espacios, ....)


	h4. Directorios y archivos
	[TODO]
	archivo principal.
	carpeta parcials


	h4. Compilado
	[TODO]
	Siemprte que sea posible y necesario generaremos un solo css para usarlo en las vistas.
	Generaremos adicionalmente cada parcial por separado para que puedan ser usados de manera independiente en las vistas de versiones anteriores cuando sea necesario.



	h2. visual styleguide de OKN UI

	> Estamos haciendo el "kitchen sink".

	En esta guia esta documentado los estilos usados en OKN con sus respectivos ejemplos HTML para que puedan ser reutilizados en la plataforma de manera rapida y sencilla.

	"kitchen sink":https://docdes.cloud.okn.me/v2/


	h3. Como documentar "OKN UI"

	Para crear una documentación Markdown
	[TODO] con comentaros escritos en MARKDOWN