Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

You want enabling CSS selectors, not disabling ones

css-tricks.com

Post reply on HN
Print view View original

21–30 of 120 posts

Re: You want enabling CSS selectors, not disabling ones

#21

Post by ArchieMaclean »

politician wrote: post #19

Is there a language that compiles to CSS but excludes the decades of cruft that have accumulated in CSS? Something that just exposes a few key primitives and jettisons the rest even if that means it doesn't handle some extreme edge cases?

I think the hard part with this is that because CSS properties are so context-dependent, the compiler would have to somehow figure out a way to translate your simple property into the correct one, without knowing how your HTML is structured.

For example:

.thing { topgap: 10 }

.other { topgap: 10 }

Would have to compile to different things if .thing was in a flexbox and .other was in a grid or a box. Since a lot of HTML is dynamically generated, we don't actually "know" this, and specifying which to use yourself ahead of time defeats the purpose, since you may as well just use the normal CSS properties. This could however work with completely static HTML. Maybe some JavaScript solution could hack on dynamic CSS but I would be sceptical of accessibility and performance in that case.

In the precompiled case, unless all the CSS was outputted using a very limited subset of CSS along with a large "base" CSS file, I don't quite know how it would work.

I hope somebody proves me wrong!

Re: You want enabling CSS selectors, not disabling ones

#22

Post by leephillips »

mattwad wrote: post #20
TimTheTinker wrote: post #16

Earlier quoted context omitted.

I disagree. If a 5px margin is the general rule, then I would argue it's cleaner to apply it generally, and then apply the 10px margin exceptions in separate rules. - When special cases are added or removed, the general rule won't have to be adjusted, just code that handles the special cases. - On the other hand, a single general rule that specifically avoids application to multiple exceptional cases will be pretty l…

plus it's called "cascading style sheets". you're going against the current if everything wants to be so specific. This is one of my gripes with styled components.. it makes it easy to forget the power of cascading rules!

I think that forgetting the power of the cascade is part of the point, maybe the main point.

Re: You want enabling CSS selectors, not disabling ones

#23

Post by jordwest »

This selector has saved me an inordinate amount of time hacking together UIs quickly:

    .vertical-stack > :not(:last-child) {
      margin-bottom: 8px
    }
Just add the class to a parent and all the children will have spaced between, but no spacing around the edges. It’s then easy to add padding to the parent:

    
      Heading
      
Paragraph

      
Paragraph

Re: You want enabling CSS selectors, not disabling ones

#24

Post by mewpmewp2 »

It might be subjective, but I disagree, for me it would be easier to reason, read and maintain the first way, preferably with scss, so you nest the last child. Maybe it is because that's the pattern I have most faced, though.

And I think definitely avoid li + li. It wouldn't be immediately obvious at all for me if I saw that, what the intention is.

Re: You want enabling CSS selectors, not disabling ones

#25

Post by leephillips »

oleganza wrote: post #3

This reminds of an idea in math that proofs by construction are better than proofs by contradiction. Or making artificial grammars (e.g. PLs) with recursive descent parsers instead of context-sensitive grammars with Turing-complete parsers. If you can build something step-by-step with a clear hierarchy and easy to trace causes and effects, the result seems to be more convincing/reliable than a process involving a bun…

That’s what made Paul Gordon complain after he read a proof by David Hilbert, of his own conjecture, that “This is not mathematics. This is theology.”

Re: You want enabling CSS selectors, not disabling ones

#26

Post by sfink »

I think rule-followed-by-exception is clearly superior because it's more flexible and generalizes better to future additions.

Except when it isn't superior. Like when the exception is pages of code below the rule.

Which means that precise (enabling) selectors are more robust since you don't have to worry about future CSS additions (or even whether to look for exceptions).

Which means that in general, general rules don't work very well.

Re: You want enabling CSS selectors, not disabling ones

#27

Post by thorin1 »

jordwest wrote: post #23

This selector has saved me an inordinate amount of time hacking together UIs quickly: .vertical-stack > :not(:last-child) { margin-bottom: 8px } Just add the class to a parent and all the children will have spaced between, but no spacing around the edges. It’s then easy to add padding to the parent: Heading Paragraph Paragraph

I am always using negative margins on container for this.

Re: You want enabling CSS selectors, not disabling ones

#28

Post by noman-land »

dvaun wrote: post #6

I found the linked article "Axiomatic CSS and Lobotomized Owls" to be a decent read. I'm surprised that it hasn't been highly upvoted in the past despite having many submissions to HN. Article: https://alistapart.com/article/axiomatic-css-and-lobotomized... Prev. submissions: https://hn.algolia.com/?dateRange=all&page=0&prefix=true&que...

It's an excellent article. I share it with people constantly.

Re: You want enabling CSS selectors, not disabling ones

#29

Post by jimkleiber »

Hmm, I visited the site on my phone and it seemed to be glitching out. A red background with white outlined large lettering blinking on and off so quickly I couldn't decipher the text. Looked like maybe a GA and some xxxxx after it. Viewing from an iPhone X using the iOS 14.7.1 on Firefox.

Anyone else seeing this? Or am I 1) crazy and/or 2) admitting to having some crazy virus on my phone?

Re: You want enabling CSS selectors, not disabling ones

#30

Post by have_faith »

jordwest wrote: post #23

This selector has saved me an inordinate amount of time hacking together UIs quickly: .vertical-stack > :not(:last-child) { margin-bottom: 8px } Just add the class to a parent and all the children will have spaced between, but no spacing around the edges. It’s then easy to add padding to the parent: Heading Paragraph Paragraph

This is a bit easier these days with Grid. You can set grid-template-columns: 1fr; and use gap: 20px; to control the spacing which feels much more natural. You can then pad as you like.

edit: realise this is at the end of the article so you probably already know this

Post reply on HN