What the pros/cons of using Airbnb CSS / Sass Styleguide? about css HOT 3 CLOSED

What the main reason did you follow when you decided to develop Airbnb CSS / Sass Style Guide?

This guide predates my time at Airbnb, so I'm not sure I have the context to help you here. Maybe @mikefowler can answer?

Do you have any info which metrics have you improved, e.g. the counts of bugs/issues, time for development for a new feature, the size of components, etc?

Not that I am aware of. More recently, we've been writing CSS-in-JS, so reliance on this particular style guide has fallen substantially. Our style guide for that can be found at: https://github.com/airbnb/javascript/tree/master/css-in-javascript

Do you have any kind of Living Style Guide system based on your CSS / Sass Style Guide?

I don't think I understand what you mean by Living Style Guide system. Can you give me some examples?

from css.

Hi @lencioni,

Thank you for your answers.

Not that I am aware of. More recently, we've been writing CSS-in-JS, so reliance on this particular style guide has fallen substantially. Our style guide for that can be found at: https://github.com/airbnb/javascript/tree/master/css-in-javascript

Yes, I've seen this style guide. Do you happen to know whether developers use any lint tools (e.g. Stylelint, PostCSS with plugins) in this instance?

I don't think I understand what you mean by Living Style Guide system. Can you give me some examples?

The great example is Lonely Planet Style Guide in this case. It includes various interactive elements as well as color palette, typography, etc. So, anyone can open this style guide and interacts with it.

Best regards,
Vitalii

from css.

We aren't using any CSS linting tools for our CSS in js. But we have an eslint plugin that checks for a couple of things. https://github.com/airbnb/eslint-plugin-react-with-styles

I see what you mean by living style guide. We use storybook for this purpose but it is only internally accessible. Also, happo fills some of these use cases to an extent.

from css.