1. Curso de HTML / CSS
  2. /
  3. CSS
  4. /
  5. CSS - Selectores, especificidad y metodología (VIII)
1 / 1

CSS - Selectores, especificidad y metodología (VIII)

Ejemplo de BEM

Las otras metodologías no las he utilizado, así que prefiero no poner algo que esté mal y dejar algo que sí haya hecho y sepa como funciona.

Para un evento, por ejemplo, este sería el CSS resultante.

.calendarevent {}
.calendarevent--curso {}
.calendarevent--is-small {}
.calendarevent__title {}
.calendarevent__header {}
.calendarevent__body {}
.calendarevent__type {}

Pero, si usamos nesting de SCSS (que estará disponible de forma nativa en breve, pero no se sabe exactamente la forma de escribirlo), por eso no está escrito de esa manera

// En SCSS
.calendarevent {
  // Modificadores
  &--curso {}    // evento de tipo curso
  &--is-small {} // evento pequeño

  // En POSE además como tipos usamos también booleanos
  &.is-curso {}    // evento de tipo curso
  &.is-small {} // evento pequeño

  // Los descendientes (elementos).
  &__title {} 
  &__header {}
  &__body {}
  &__type {}
}

Tiene sus desventajas también, como toda metodología, pero es legible en aplicaciones basadas en componentes y se puede combinar con algún framework.