Skip to content

Paradigma GEMCSS (globals, elements and modules) está basado en conceptos como OOCSS y SMACSS.

Notifications You must be signed in to change notification settings

gc-victor/GEMCSS

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 

Repository files navigation

GEMCSS

El paradigma GEM (globals, elements and modules) está basado en conceptos como OOCSS y SMACSS.

GEM son las siglas, y prefijos, de los tres tipos de clases utilizadas para crear nuestros CSS. Por lo tanto, usaremos ‘.g-’ para las globales, ‘.e-’ para los elementos y ‘.m-’ para módulos.

Estos tienen un orden de mayor a menor en complejidad y de menor a mayor en repetición. Siendo los globales los más abstractos, los elementos la unidad mínima y los módulos una estructura más compleja que los anteriores.

Las clases globales también llamadas en otras arquitecturas 'base' o 'utils', son aquellas que usamos en innumerables ocasiones, normalmente con una única propiedad. Sirven para extender, pudiéndolo hacer entre ellas, elementos y módulos.

Ejemplo de clases globales: .g-floatL, .g-inlineBlock, .g-colorA, .g-column1 o .g-gutter.

Los prefijos para las clases hijas de modelos y elementos deben comenzar por el nombre de este. Por lo que, las clases hijas de ‘.m-tabs’ serán ‘.m-tabs-element’ o ‘.m-tabs-inner’. Ya que recomendamos no usar más de tres clases hijas, siendo ideal una especificidad de 10, es decir un único selector de clase para cada una de ellas, proponemos usar la nomenclatura ‘.m-/.e-’ + ‘outer/element/inner’. Siendo ‘-element’ el elemento principal, ’-outer’ una clase que lo recubra e ‘-inner’ una clase hija del elemento principal.

El uso de este paradigma no solo afecta al CSS. Es la arquitectura que debe marcar el camino en el desarrollo del templating. Utilizando una estructura modular, independientemente del lenguaje que se utilice. Reutilizando los módulos y elementos tantas veces como sea necesario, teniendo siempre presentes principios como DRY (Don't Repeat Yourself) o KISS (Keep It Simple, Stupid!).

Referencias

Autor

Licencia

Public domain: http://unlicense.org/

About

Paradigma GEMCSS (globals, elements and modules) está basado en conceptos como OOCSS y SMACSS.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published