4 ms·

started reading some of the ideas and got put-off almost immediately. 'margin-top'? the owl-selector? Really? Why do we keep making our life more difficult than

started reading some of the ideas and got put-off almost immediately. 'margin-top'? the owl-selector? Really? Why do we keep making our life more difficult than it should be? CSS is such a beautiful and interesting tool, yet we still decide to misuse it in trying to be too smart. ( margin-top: you start dealing with parents inheriting the margin - which is an old quirk of CSS - it's a side-effect you need to control, so the usage of margin-top should always be avoided and margin-bottom should be the preferred solution owl selector: performance implications - it's fairly bad from a performance POV to use it. Also, we live in a world where we have control over how the layout is generated, we should avoid using generic selectors Source: I've been doing frontend and focused on CSS for over 10 years )

Atomskun 7y ago
> so the usage of margin-top should always be avoided Not really if you consider sibling layouts, e.g.: https://matthewjamestaylor.com/css-margin-top-vs-bottom https://matthewjamestaylor.com/css-margin-top-vs-bottom > owl selector: performance implications - it's fairly bad from a performance POV to use it. Arguing about "CSS performance" is futile when the real cause of bloatedness is mostly JavaScript these days (also: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls http://alistapart.com/article/axiomatic-css-and-lobotomized-...). The owl-selector can actually be quite elegant, but becomes a burden if you have lots of side-by-side blocks (which would always need to set their margin-top to 0).
- ry_ry 7y ago
  I was suprised the degree to which selector performance is a negligible overhead in normal use these days. Was browsing through the docs for some Vue+CSS library or another recently, and the author had done quite a lot of research into this, was interesting. They were heavily using the square bracket html-attribute selector notation, although I'm not sure if it performs better now, or if modern processors are just that much faster.

Atomskun 7y ago

> so the usage of margin-top should always be avoided Not really if you consider sibling layouts, e.g.: https://matthewjamestaylor.com/css-margin-top-vs-bottom https://matthewjamestaylor.com/css-margin-top-vs-bottom > owl selector: performance implications - it's fairly bad from a performance POV to use it. Arguing about "CSS performance" is futile when the real cause of bloatedness is mostly JavaScript these days (also: http://alistapart.com/article/axiomatic-css-and-lobotomized-owls http://alistapart.com/article/axiomatic-css-and-lobotomized-...). The owl-selector can actually be quite elegant, but becomes a burden if you have lots of side-by-side blocks (which would always need to set their margin-top to 0).

ry_ry 7y ago
I was suprised the degree to which selector performance is a negligible overhead in normal use these days. Was browsing through the docs for some Vue+CSS library or another recently, and the author had done quite a lot of research into this, was interesting. They were heavily using the square bracket html-attribute selector notation, although I'm not sure if it performs better now, or if modern processors are just that much faster.