4 ms·
So, the point is that margins on the UI boundaries of a component are a bad idea. Margins are a visual side-effect, which break the idea of keeping components e
by williamdclt 7y ago
So, the point is that margins on the UI boundaries of a component are a bad idea. Margins are a visual side-effect, which break the idea of keeping components encapsulated.
It's not anything new really, everybody has experienced pain to try to reuse a component but it's badly encapsulated so it's painful to fit in a new context. It's always worth making it clear and reiterating basic principle under different lights, but this "considered harmful" like you discovered a new law of physics always feels pretentious to me
- k__ 7y agoIf you avoid them at component definition time and only inject them when using a component, things should be fine.
- crooked-v 7y agoA simple example with React would be anything using the rebass library (https://rebassjs.org https://rebassjs.org). You can extend its Box/Flex components or do a pass-through (e.g. `({a, b, ...rest}) => <Box {...rest}>{... your stuff here ...}</Box>`), at which point when using your own component you can do `<MyComponentHere marginLeft="0.5em"/>` and have native CSS margins without embedding them into the component or into stylesheets for the component.
- gyrgtyn 7y agoYou could argue that margins are part of the element, just like padding and border are, so
- williamdclt 7y agoYou could, but this mental model probably won't be as helpful as thinking of margin as the element pushing its neighbors away (or pushing itself away). It's hard to define margin without any relation to neighboring elements, it's easy for padding and border. It seems logical that a reusable component shouldn't make assumptions about its neighbors, therefore avoid margins on its boundaries.
- city41 7y agoMargin is usually added in response to nearby elements. Making assumptions about nearby elements is what makes components hard to reuse.