@composi/styler:

• Instalación
• Styler
• Uso

Styler

Componentes Estilizados

@composi/styler te permite crear componentes con estilo limitado a su propio ámbito. Lo hace creando una hoja virtual de estilo para el componente. Styler no usa ningún identificador en la hoja de estilo como hacen algunas soluciones. La especificidad del estilo que definas depende de ti. Esto significa que si deseas que los estilos sean específicos para un componente, asigna un identificador a la base del componente y utilízalo en la declaración de estilo. O si deseas ser más genérico, usa una clase en la base de componentes y en su hoja de estilo. Además, el uso de BEM puede facilitar mucho esta especificidad.

Si usas Styer con más de un componente, las reglas se agregarán a la misma hoja virtual de estilo. Esto significa que si creas reglas con el mismo selector, la última sobrescribirá a las anteriores. Examinemos un ejemplo de eso:

addStyles('ul', {
  li: {
    color: 'red'
  },
  li: {
    color: 'green'
  }
})

El código anterior define dos reglas para el mismo selector. Las propiedades son idénticas y diferan so por sus valores. Con CSS normal la cascada hace que solo la última regla se usará. La regla previa sera ignorada. Así funcionan las hojas de estilo escritas por mano. Debido a que Styler crea la hoja de estilo con JavaScript, la primera regla resulta sobrescrito por la segunda. Si abrieramos el inspector de web del navegador para examinar el estilo del documento para ese código, encontraríamos lo siguiente:

document.styleSheets[1].cssRules[0].cssText
cssText: "ul li { color: green; }"

Características

@composi/styler te permite anidar a los selectores, así cómo lo hacen SASS y LESS:

addStyles('#list-contianer', {
  ul: {
    listStyle: 'none',
    'boder': 'solid 1px #ccc',
    margin: 0,
    padding: 0,
    // Child selector:
    li: {
      padding: '5px 10px',
      borderBottom: 'solid 1px #ccc',
      color: '#333',
      backgroundColor: '#fff'
      // pseudo-element:
      ':hover': {
        color: '#fff',
        backgroundColor: '#333'
      }
    }
  }
})

Fíjate cómo indicamos que la etiqueta li es un elemento secundario de la etiqueta ul. También indicamos el estado de hover del ítem de lista como hijo del mismo ítem de lista. los pseudo-elementos tienen que estar entre comillas porque comienzan con ":".

Usa con Cuidado

@composi/styler no viene siendo un reemplazo para las hojas externas de estilos. Debe de usarse tan sólo para encapsular algunos estilos que se específicos al componente y eso para encapsularlos independentemente de la hoja de estilo de la aplicación. No trates de definir todos los estilos para el componente por medio de Styler. Al contrario, úsalo junto con la hoja de estilos por defecto.