Estoy interesado en tener un modelo de buenas practicas, hasta donde he leído he escrito mi modelo experimental, busco sugerencias para mejorarlo y partir de el próximos proyectos, gracias
Referencias:
http://sisneting.com.mx/blog/guia-de...practicas-css/ http://octuweb.com/organizacion-del-...yectos-grandes Código HTML:
/**
* ^navigation ^lists
*/
.nav{}
/**
* ^grids ^lists ^tables
*/
.matrix{}
/*------------------------------------*\
$RESET
zona zero.
$ELEMENTOS
h1 sin clase, ul sin clase etc.
$OBJETOS (Esqueleto) y $ABSTRACCIONES
Patrones de diseño genéricos y subyacentes.
$COMPONENTES
Componentes construídos a partir de objetos y sus extensiones.
$TEXTURAS
Estados de error, info, etc…
$MIXINS
Funciones personalizadas...
\*------------------------------------*/
/*------------------------------------*\
$RESET
\*------------------------------------*/
/*------------------------------------*\
$ELEMENTOS
\*------------------------------------*/
/*------------------------------------*\
$OBJETOS (Esqueleto) y $ABSTRACCIONES
\*------------------------------------*/
/*div*/.page-wrapper{}
/*------------------------------------*\
$COMPONENTES
\*------------------------------------*/
//OOCSS(Object Oriented CSS) .persona--mujer{}
//estructura (objetos)
//skin (extension)
//Convenciones BEM .persona--mujer
//Selectores Cuasi-calificados /*div*/
/*div*/ .persona{}
/*div*/ .persona--mujer{}
/*div*/ .persona__mano{}
/*div*/ .persona__mano--izquierda{}
/*div*/ .persona__mano--derecha{}
/**
* Extiende `.foo` en theme.css
*/
.foo{}
/*------------------------------------*\
$TEXTURAS
\*------------------------------------*/
/**
* Extendido de `.foo` en base.css
*/
.bar{}
/*------------------------------------*\
$MIXINS (LESS)
\*------------------------------------*/
.font-size(@font-size: 16) {
@rem: (@font-size / 10);
font-size: @font-size * 1px;
font-size: ~"@{rem}rem";
}