CSS Modules - class names and animation names are scoped locally by default

Limbaje de Programare HTML & CSS
, ,
1

Am inceput sa folosesc CSS Modules in dezvoltarea unui proiect, personal imi place mult abordarea. Link-uri utile pt. inceput:

Motivatie:

2 Likes
2

Ce naming folosesti?

3

Naming intern pt. componente sau overall in UI?

1 Like
4

Both :). Desi la cele locale ma refeream. Mai folosesti nested classes pentru local?

1 Like
5

Am inceput cu o abordare Atomic Design unde fiecare component are un singur scop. Am creat un component baza cu un API mai complex si apoi variante ale acestuia care au scopuri diferite, ex:

Base:

  • Button

Variants:

Nu folosesc nested classes, folosesc composes peste tot:

/* Button/style.css */
.base {
  ...
}

/* ButtonStateful/style.css */
.base {
  composes: base from 'Button/style.css';
}

Fiecare component este încapsulat, nu folosesc CSS margins, daca am nevoie ca butoanele sa fie spatiate, folosesc un component pt. layout:

// type: list, blocks, fluid
Grid({ type: 'list', gutter: '10px', items: [BUTTONS] })

La naming inca nu mi-am format o preferinta, dar initial m-am luat dupa denumirile folosite de Google Material Design si Salesforce Style Guide.

2 Likes