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

31–40 of 120 posts

Re: You want enabling CSS selectors, not disabling ones

#31

Post by chrisweekly »

sfink wrote: post #26

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 do…

Yeah, just like "in theory, there's no difference between theory and practice; in practice, there is."

Re: You want enabling CSS selectors, not disabling ones

#32

Post by chrisweekly »

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...

While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.

Re: You want enabling CSS selectors, not disabling ones

#33

Post by ljm »

I think CSS is approaching the point where it's equivalent to assembly because it's impossible to keep up and write good CSS. It's no longer easy to do it by hand which is why there is a whole ecosystem of tooling that handles CSS.

Not to mention that CSS is essentially platform-specific due to differences between chrome, safari and firefox.

Re: You want enabling CSS selectors, not disabling ones

#34

Post by dvaun »

chrisweekly wrote: post #32
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...

While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.

What a neat resource. Thanks for sharing!

Re: You want enabling CSS selectors, not disabling ones

#35

Post by leephillips »

chrisweekly wrote: post #32
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...

While "Axiomatic CSS" per se has (unfortunately) not quite (yet?) gone mainstream, its origins -- see https://every-layout.dev -- are a profoundly excellent resource, and have been highly influential.

That site is black on white¹, and has no other colors, images, fancy borders, nor any other obvious “design”—and yet it is remarkably pleasant to look at, even beautiful. The site sells the authors’ ideas; they obviously know something. (Plus no doorslams, cookie warnings, or other annoyances. And an RSS feed.)

[1] Really very dark grey on very light grey.

Re: You want enabling CSS selectors, not disabling ones

#36

Post by evan_ »

have_faith wrote: post #30
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

`gap` is available on Flexbox in most browsers since earlier this year.

Re: You want enabling CSS selectors, not disabling ones

#37

Post by [deleted] »

have_faith wrote: post #30
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

[deleted]

Re: You want enabling CSS selectors, not disabling ones

#38

Post by emadabdulrahim »

The best resource that will teach you systematic thinking and give you a proper foundation for how to use CSS is https://every-layout.dev/. [0]

Really enjoyable read and it takes you through the thinking process.

[0] Not recommended for absolute beginners

Re: You want enabling CSS selectors, not disabling ones

#39

Post by nine_k »

emadabdulrahim wrote: post #38

The best resource that will teach you systematic thinking and give you a proper foundation for how to use CSS is https://every-layout.dev/ . [0] Really enjoyable read and it takes you through the thinking process. [0] Not recommended for absolute beginners

$69 for full access (one-time payment AFAICT).

Must be worth it if web design is your profession.

Re: You want enabling CSS selectors, not disabling ones

#40

Post by chefandy »

ljm wrote: post #33

I think CSS is approaching the point where it's equivalent to assembly because it's impossible to keep up and write good CSS. It's no longer easy to do it by hand which is why there is a whole ecosystem of tooling that handles CSS. Not to mention that CSS is essentially platform-specific due to differences between chrome, safari and firefox.

That's true for every language/format used on the front end.

I do a lot of visual work as a designer/developer. If it weren't for the obvious accessibility caveats such as basic page structure, I'd be making at least 20% of the pages I code in straight SVG.

Edit: Maybe not HTML5 I guess... you can make anything inscrutable if you try.

Post reply on HN