markdown Miestándarcss

Posted 2021-05-06

# CSS
## Respecto la sintaxis

- Usar tabs suaves, con solo dos espacios  
- Cuando se indiquen grupos de selectores, colocar uno por línea
~~~ css
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
      padding: 15px;
      margin-bottom: 15px;
      background-color: rgba(0,0,0,.5);
      box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
~~~

- Siempre separar el nombre de una propiedad de su valor con dos puntos y un espacio en blanco  

- Cada de las declaraciones deben estar en una línea propia, lo mismo que el cierre de llaves.  
Una excepción a esta regla debe ser bastante clara, como por ejemplo cuando cada juego de reglas lleva 
una sola declaración  
 
~~~ css
.icon {
    display: inline-block;
    width:  16px;
    height: 16px;
    background-image: url(/img/sprite.svg);
}

.icon--home     { background-position:   0     0  ; }
.icon--person   { background-position: -16px   0  ; }
.icon--files    { background-position:   0   -16px; }
.icon--settings { background-position: -16px -16px; }
~~~

- Cuando una propiedad sea muy extensa se puede dividir en línea separadas cada una de las partes de su especificación.  

~~~ css
.class { 
    font-family: Georgia, serif;
    line-height: 1.4;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, .5),
                 0 1px 0 #fff;
}  
~~~

-	Las declaraciones de las propedades deben estar ordenadas alfabéticamente, pero separando y agrupando entre sí las propiedades 
que son especificas por tipo de browser o bien las animaciones cuyos  keyframes respectivos deben indicarse inmediatamente    

~~~ css
#overlay {
  background: #fff;
  color: #777;
  padding: 10px;
  position: absolute;
  z-index: 1;
	 
    -moz-animation-direction: alternate;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;

    -moz-animation-duration: 3s;
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
 

    -moz-animation-name: slidein;
    -webkit-animation-name: slidein;
    animation-name: slidein;


    -moz-animation-iteration-count: 3;
    -webkit-animation-iteration-count: 3;
    animation-iteration-count: 3;


}

@keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0;
   width:100%;
 }
}

@-moz-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
      
  to {
    margin-left:0;
    width:100%;
  }
}

@-webkit-keyframes slidein {
  from {
    margin-left:100%;
    width:300%
  }
  
  to {
   margin-left:0;
   width:100%;
 }
}  

~~~

-	Evitar poner ceros inútiles, delante de los valores cuando son numéricos  
-	Todos los valores deben ser en minúsculas  
-	Evitar en lo posible las propiedades abreviadas
-	Los valores hexadecimales no deben ir abreviados
-	No usar @import, puesto que es mas lento y añade requests extras para funcionar

~~~ html
<!-- Usar enlaces -->
<link rel="stylesheet" href="core.css">

<!-- Evitar @imports -->
<style>
  @import url("core.css");
</style>
~~~ 

-	Coloca los media queries tan cerca como se pueda  a sus clases relevantes.  
NO debes de reunirlos todos en una hoja aparte o amontonarlos al final de la hoja actual 

## De los comentarios

- Siga el estilo de comentarios utilizado en normalize.css.   
Los bloques de comentarios deben tener un máximo de 80 caracteres de ancho.
Este estilo de comentario se usa como el separador de las secciones principales.  
Hay 2 líneas vacías antes y después de ella:

~~~ css
/* ==========================================================================
   Section comment block
   ========================================================================== */

/* Sub-section comment block
   ========================================================================== */

/* elemento u objeto */  

~~~ 

- Los comentarios empiezan con letra mayúscula
- 
## De los tipos

- usar @font-face, colocando el nombre de la fuente, con el nombre de aquella sección donde se va a usar esa fuente y usando el sufijo ''-font''
por ejemplo, aquí la fuente que se va a usar en las grillas de datos:   

~~~ css 
@font-face {
  font-family: 'griddata_font';
  font-weight: normal;
  font-style: normal;
  src: url("./assets/webfonts/sourcesanspro-regular.otf") format("opentype");
}
~~~  


## Nombres de las clases
- Los nombres no deben usar ni camelCase ni guión bajo, y van sólo en minúsculas
- Antes de pensar sobre el nombre de clase, elije un buen nombre para los elementos HTML  
-	Pon el nombre de la clase en el nivel más profundo posible  

~~~ html
<main class='mainly'>
  <p>Lorem ipsum</p> <!-- quiero dar estilo a este párrafo-->
</main>

~~~ 

~~~ css 
main .mainly p { /* NO HAGAS ESTO */
}

/* en su lugar asignale un nombre de clase para p : <p class='paragraphly' /> */

.paragraphly {
  /* su estilo */
}
~~~

-	Usa contenido para encontrar un nombre
~~~ css
.c-header-logo {
   / * Solo leyendo el nombre, creo que este selector se dirige al logo del encabezado. * /
}
~~~  


 
### Intenta con BEM
(block entity modifier)  
Es una de las convenciones más comúnmente usadas por el momento.
Se ve muy raro a primera vista, no tengas miedo  
El costo de entrada es extremadamente bajo  
Puedes probarlo ahora en cualquier parte de algún proyecto existente  
Los beneficios a largo plazo son enormes  

Básicamente consiste en:  
(doble guion) significa la variación del elemento.  
(doble guion bajo) significa hijos o subcomponentes del elemento.

Ejemplo:
~~~ html 
<button class = 'btn btn--warning'> <!-- .btn - advertencia de una variación de .btn -->  
   <div class = "btn__text"> </ div> <!-- .btn__text uno de los hijos de .btn -->  
</ button>
~~~ 

~~~ css 
.btn--advertencia {
    /* Hurra 
    Por convención, sé que el código aquí se relaciona con la variación "advertencia" de un botón, 
    sin siquiera ver el código HMTL. !*/
}

.btn__text {
    /* Por la misma razón, sé que este estilo se dirige al texto en un botón */
}
~~~ 

- Uso del reset de propiedades
El objetivo de una hoja de estilo de restablecimiento es reducir las incoherencias del navegador
en cosas como alturas de línea predeterminadas, márgenes y tamaños de fuente de los títulos, 
y así sucesivamente.

~~~ css
/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

~~~

### Intenta usar solo una letra como prefijo significativo
ejemplo
~~~ html
<button class = 'o-layout'>
   <div class = 'o-layout-item o-grid c-button'> </ div>
   <!-- Al escanear HTML, el ojo puede diferenciar rápidamente quién hace qué -->
</ button>  

~~~

Prefijo | Propósito | Comentario
-- | -- | --
.c- | Clases para componentes | para las clases que se usan en componentes bien identificados  
.t- | Clases de temas | para poder usar en clases que siempre tendran una variación segun el tema empleado (normalmlente en un archivo aparte)  
.u- | Clases utilitarias | clases de alta especificidad para estilos muy estrechamente definidos  (pueden ir en un archivo separado)  
.js- | Clases pra javascript | son utilizadas exclusivamente por scripts y nunca deben contener estilos CSS aplicados. Repito: NO estilos en las clases de Javascript.  
.is-, .has- | de estado | para componentes caundo van a mmostrar su valor o estado 
._ | para hacks (la unica con subguión)| Las clases con un espacio de nombre de hack deben usarse cuando necesite forzar un estilo con una especificidad importante o creciente, debe ser temporal y no debe vincularse. (son para corregir algún error) 


### De los temas
- Los temas deben ir en otra hoja aparte  
mas o menos se pueden estructurar así:  

~~~ css
// in module-name.css
.t-mod {
    border: 1px solid;
}

// in theme.css
.t-mod {
    border-color: blue;
}
~~~ 

- Las clases NO semánticas deberían describir explícitamente sus propiedades  
La mayoría de ellos contienen solo una propiedad, no tiene sentido ocultar lo que es.  

~~~ css
. alineación-horizontal { /* No hagas esto. La alineación horizontal se puede lograr de muchas maneras,  
al escanear este selector en un archivo HTML, no tenemos ninguna pista sobre CÓMO se logra. */
   text-align: center;
}

/ * Prefiero este. Usando BEM, y un prefijo de un carácter, ver arriba * /
.u-text-align--center {
   text-align: center;
}
~~~ 


# Practicidad sobre Puridad
Procura mantener los estándares y semánticas de las normas, pero no a expensas de la practicidad. 


# Referencias

-	How to name css clases (May, 2016)
http://bdavidxyz.com/blog/how-to-name-css-classes/

-	CSS Coding Standards
https://github.com/xfiveco/css-coding-standards