search

generoi / genero-design-system

https://gds.generogrowth.com/
MIT License
4 stars 0 forks source link

CSS methodology #8

Closed oxyc closed 4 years ago

oxyc commented 4 years ago

Which CSS methodology should we use?

I guess my own vote would go for BEM even if i'm not always happy with it. And we should probably use the same convention for CSS variable names.

Example https://github.com/generoi/genero-design-system/pull/7/commits/5f895e06b2a31bd2f01c2ea12b8b02503b4aafe6

oxyc commented 4 years ago

And how do we deal with things like responsive variations? Sounds a bit difficult to build in a clean way using only css variables.

oxyc commented 4 years ago

Doh just realized responsive variations is really easy with css variables.

:root {
  --responsive-padding: 1rem;
}

@media (min-width: 600px) {                             
  :root {
    --responsive-padding: 2rem;
  }
}

.foo {
  padding: var(--responsive-padding);
}
taromorimoto commented 4 years ago

@oxyc I'm not really familiar with BEM. 😊 Is it basically like this: --component-name__property-name?

oxyc commented 4 years ago

I don't know if there's an established BEM rule for variables :D but i thought it sort of fit? Yes, --component-name__property-name--modifier. Not at all in love with this syntax though, but i feel --gds-button-border-color-hover could get confusing and difficult to guess fast. --gds-button__border-color--hover I could just guess without looking it up.

oxyc commented 4 years ago

HDS does https://github.com/City-of-Helsinki/helsinki-design-system/blob/master/packages/core/src/components/button/button.css#L191. As long as we are consistent with the order of the naming partials I think we can go either way?

taromorimoto commented 4 years ago

@oxyc @silentnoodlemaster what could be our naming partials order? Is that ok? If it is, I'll add it to the readme and variables file.

--component-name-size-property-modifier