CSS – building a cohesive spacing economy in website projects
This is a principle and etiquette question.
-# kind of like the mobile-first topic
A thing that bugs me with every project is setting ground stones for default CSS properties that come with HTML elements.
Do I eliminate all vertical spacing, do I only remove e.g. margin-bottom, on which elements do I remove them, how do I deal with first- and/or last-child ~
We mostly run into inconsistencies between headings, paragraphs, lists, images, ... don't we?
My goal is finding something like a guideline, workflow, best practices on how to approach this topic after applying normalizing rules,
because I feel like there (at least) must be generally valid overlaps.
Often I tend to dislike approaches that popular frameworks provide – it's maybe modular but is it future proof and maintainable?
Do we really live in a time where we adjust code rather than write it, it seems tedious.
How do you tackle this? ...
... do you find yourself mostly overriding given spacing properties because you dislike their approach and/or it's unfit to meet the demand
... do you apply your own « mini boilerplate » that generally suits common content-elements
If you have opinions, articles, blog-posts and such, feel free to share them. or call me an oddly bland pumpernickel for thinking about this 🙃
-# cheers
4 Replies
what you're describing is generally called a CSS reset and they're a hotly debated topic. At the end of the day, it's all down to personal (or team) preference. Some people prefer light resets that just take a way a few small unwanted things, others take a more hard core approach and prefer almost everything to have as little styling as possible.
I see where you are coming from. Returning to development after a decade or so, I am trying to cobble together reasonable approaches,
so I (best case) don't work myself into dead ends.
While I have normalizing ideas as such
this ofc does not solve all sibling and nesting issues AND I lack experience putting it into practice(production), uncertain how to properly solve spacing demands after resets.
That's why I would enjoy reading up on things that worked for experienced devs (:
That pretty much does solve it. That’s what I use. The space between text elements is pretty much always
1em meaning you don’t have to mess about with spacing, you can let the browser do its thing, but for elements you may want to space out that don’t have those default properties e.g. images, you can always use a flow utility for
-# Simon posted from his home account
Interesting selector, will fiddle around with it