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

81–90 of 120 posts

Re: You want enabling CSS selectors, not disabling ones

#81

Post by mewpmewp2 »

extra88 wrote: post #58
mewpmewp2 wrote: post #24

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.

> I think definitely avoid li + li. It wouldn't be immediately obvious at all for me if I saw that, what the intention is. Nothing unfamiliar is obvious. As with any language, get to know the capabilities of CSS better and it will feel familiar. The article is right that for spacing, the `gap` property on the parent makes more sense but hasn't been around long enough, we need some more older browsers to age out (espe…

Yeah, but it wouldn't be just me, point of writing readable code is so that as many developers as fast as possible would understand what is going on. So in this case I think using the pattern that is most commonly used is the best thing to do.

I've done web for more than 7 years and I still immediately wouldn't recognize why someone has used selectors in such manner (li + li). Just obfuscates things IME.

Re: You want enabling CSS selectors, not disabling ones

#82

Post by pdamoc »

innocenat wrote: post #72
evan_ wrote: post #36

Earlier quoted context omitted.

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

Currently it's ~86% according to caniuse.com. I think it's still a bit low to be used comfortably.

Good enough for vertical markets and admin/back-office apps.

Re: You want enabling CSS selectors, not disabling ones

#83

Post by chipotle_coyote »

extra88 wrote: post #65
chipotle_coyote wrote: post #56

Earlier quoted context omitted.

Okay, I'll bite. Why is #050505 on #FAFAFA (not the reverse, as you stated) "atrocious"? Are we playing the "anything less than #000000 on #FFFFFF is grey text on a grey background and entirely unreadable" card?

I don't understand their complaint either. Some people have a hard time with absolute black on absolute white (and/or vice versa) so easing up a little can be helpful. It's a small difference, 19:52:1 vs. 21:1 contrast ratio. I've seen advice to avoid exceeding 18:1 in large areas, maybe #111 on #f9f9f9.

We tend to focus only on the accessibility issues caused by low contrast, but very high contrast also makes reading more difficult, especially for people with dyslexia -- and it's also more likely to cause eye strain if it's a full-length article.

At any rate, "it's okay for text not to be pure black and backgrounds not to be pure white" has become my tiny hill to die on.

Re: You want enabling CSS selectors, not disabling ones

#84

Post by chipotle_coyote »

dotancohen wrote: post #80
extra88 wrote: post #65

Earlier quoted context omitted.

I don't understand their complaint either. Some people have a hard time with absolute black on absolute white (and/or vice versa) so easing up a little can be helpful. It's a small difference, 19:52:1 vs. 21:1 contrast ratio. I've seen advice to avoid exceeding 18:1 in large areas, maybe #111 on #f9f9f9.

How do you calculate the contrast ratio?

I use the WebAIM contrast checker:

https://webaim.org/resources/contrastchecker/

It's basically a measure of perceived brightness. The actual formula involves calculating the relative luminance of the background and foreground colors, where luminance is a value from 0 (darkest) to 1 (lightest), and using the formula

(lighter_luminance + 0.05) / (darker_luminance + 0.05)

So the highest possible contrast ratio in this system is 21:1.

Re: You want enabling CSS selectors, not disabling ones

#85

Post by gempir »

evan_ wrote: post #36
have_faith wrote: post #30

Earlier quoted context omitted.

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.

It doesn't work on iOS 13 only grid gap works

Re: You want enabling CSS selectors, not disabling ones

#86

Post by goto11 »

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?

What in particular do you consider cruft? The original "standard flow" layout model is still very relevant for document-like pages like Wikipedia even if more advanced layout models have become available. In theory you can do everything with absolute positioning (the only primitive you really need) but it would be completely impractical.

Re: You want enabling CSS selectors, not disabling ones

#87

Post by mst »

extra88 wrote: post #67
serverholic wrote: post #66

Earlier quoted context omitted.

The performance difference is negligible. If you add a new card to the list then react is going to add/remove a couple CSS classes. Completely negligible. Plus you're going to need this approach anyway if you want to do any more advanced logic like maybe you have a list of users and you want to color them based on some status. With this method you have the above logic all in one place and in one language. After havin…

You may need the .map() for styling based on status but const isLast = i === cards.length - 1 const className = "card" + isLast ? '' : 'card-margin' Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening. > all in one place and in one language That seems like the real reason, keeping to one language. I think…

> Seems funny to argue for JavaScript's simplicity while using .map() and an anonymous callback function; a good ol' for loop would make it more clear what's happening.

When you're doing a side effect free transform of some data, I find .map far clearer.

A for loop would require .push type noise for that case and so personally I'd find that noisier and harder to skim read.

Tastes vary, of course, but certainly it doesn't seem funny to me at all.

Re: You want enabling CSS selectors, not disabling ones

#88

Post by 11235813213455 »

serverholic wrote: post #61
extra88 wrote: post #55

Earlier quoted context omitted.

How do you solve the kind of problem the article is describing? How do you have a margin on the bottom of every except the last one? Is there a loop for cards with a conditional that doesn't add the margin? I think the declarative language solution they offer is better.

Yeah just use the index of the card. For example: cards.map((card, i) => { const isLast = i === cards.length - 1 const className = "card" + isLast ? '' : 'card-margin' return )} The nice thing about this is you have a full programming language at your fingertips. You could do something with every even card, ever prime number card, etc.

you're missing parens: "card" + (isLast ? '' : 'card-margin') // ternary has a very low precedence https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

or `card ${isLast ? '' : 'card-margin'}`

Re: You want enabling CSS selectors, not disabling ones

#89

Post by rocqua »

mninm wrote: post #79
chrisweekly wrote: post #32

Earlier quoted context omitted.

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.

I was trying to figure out what font they are using and when I was inspecting the page I found the comment below. I have nothing in particular to say about it. I just thought it was interesting.

Pretty sure that is from the church of satan. Which is not about worshiping satan but more humanist / atheist / there is no god but you should still be a force for good.

It's just that their imagery is intentionally quite jarring to christians. To quote the satanists. It is not them who believe in Satan, its the christians who believe in Satan.

Post reply on HN