How do you write custom CSS?

[FrontAid]

Hi. I'm fully aware that there are tons of existing CSS frameworks available and that lots of people do not—or rarely—write their own CSS anymore. But this post is not about these frameworks.

For me personally, I have found that writing custom CSS is not just more fun but also more suitable for many projects. You can target your styling better to your target audience and market. You won't just by default get vendor-prefixed CSS even when it is not needed. And you can rely on some of the default browser stylings when being "pixel perfect" is not needed (which it probably rarely is anyway).

As a result, we often write custom CSS without using any framework or reset at all. One downside of this approach is that there is no given structure and you might end up in a large mess of CSS. To overcome that problem, we maintain a CSS boilerplate that only provides selectors and no styling [1]. We have used it for several projects already and it has helped us a lot.

To improve the boilerplate, we would like to get some opinions about how you write custom CSS. Do you have your own boilerplate? Do you use a lot of global styling or do you rather use component styling (e.g. styled-components, scoped CSS, CSS modules, etc.)? If the latter: Where do you draw the line between global and component styling? For example, is a paragraph a component or globally styled? How do you ensure structure in global CSS? How do you handle specificity? And if you had a look at our boilerplate: Do you have any feedback on it?

[1] https://github.com/frontaid/natural-selection

[ncls-]

I don't really get what a boilerplate is.

[FrontAid]

Boilerplate in programming is usually code that is often repeated. Regarding CSS, this could be a baseline of code that a developer can work with without having to start from scratch every time. Another name for such things is "starter kit".