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

CSS Selectors: A Visual Guide

fffuel.co

Post reply on HN
Print view View original

31–40 of 59 posts

Re: CSS Selectors: A Visual Guide

#31

Post by hinkley »

oneeyedpigeon wrote: post #24
hinkley wrote: post #19

Earlier quoted context omitted.

In a large app you often can’t easily find all of the html. It’s less work by far to ensure you can find all of the CSS though. And when the company decides to rebrand and change the color scheme for the whole app, which they will at least half the time, you’ll be glad not to be playing whack-a-mole. Problems that aren’t done when you think they’re done create a lot of friction with the rest of the org. Open ended pr…

> In a large app you often can’t easily find all of the html. Which is often a warning sign of a bad design. The times I've dealt with systems that bury a certain piece of text in either a content file or a template or the database... > It’s less work by far to ensure you can find all of the CSS though. Hmm... depends. I've seen things like React embedding the CSS directly in with the markup and component logic etc.…

There are no clean designs on a large team. Anyone who tells you otherwise is selling something.

Zealots provide solutions that cannot possibly survive contact with actual humans. The rest of the team talks about them behind their backs.

> I've seen things like React embedding the CSS directly in with the markup and component logic etc.

You were talking about bad designs? Embedded styling is not Cascading Style Sheets. It’s embedded styling. There’s no sheet, and no cascade.

Nothing is free, and few things are easy. There are lines that are easier to maintain in practice than others, and separation of CSS is one of the former.

Re: CSS Selectors: A Visual Guide

#32

Post by Kiro »

oneeyedpigeon wrote: post #23
Kiro wrote: post #9

Cool but also reminds me why I use inline styles for everything. I don't want to fiddle with selectors. I want to put the styling right on the element.

Presumably you never use hover styles, media queries, or quite a lot of other CSS features?

I use Tailwind when I need that.

Re: CSS Selectors: A Visual Guide

#33

Post by Kiro »

ailef wrote: post #13
Kiro wrote: post #9

Cool but also reminds me why I use inline styles for everything. I don't want to fiddle with selectors. I want to put the styling right on the element.

How do you create reusable styles this way?

With components. Same thing as when isolating styles to a component in various frameworks (e.g. Single-File Components in Vue) but instead of its own style tags I just put the styling directly in the HTML.

Re: CSS Selectors: A Visual Guide

#35

Post by oneeyedpigeon »

hinkley wrote: post #31
oneeyedpigeon wrote: post #24

Earlier quoted context omitted.

> In a large app you often can’t easily find all of the html. Which is often a warning sign of a bad design. The times I've dealt with systems that bury a certain piece of text in either a content file or a template or the database... > It’s less work by far to ensure you can find all of the CSS though. Hmm... depends. I've seen things like React embedding the CSS directly in with the markup and component logic etc.…

There are no clean designs on a large team. Anyone who tells you otherwise is selling something. Zealots provide solutions that cannot possibly survive contact with actual humans. The rest of the team talks about them behind their backs. > I've seen things like React embedding the CSS directly in with the markup and component logic etc. You were talking about bad designs? Embedded styling is not Cascading Style Sheet…

> Embedded styling is not Cascading Style Sheets

I think that's needless pedantry; the contents of the `style` attribute still needs to be valid CSS.

Re: CSS Selectors: A Visual Guide

#37

Post by rafram »

anilakar wrote: post #14

You can make nth-child repeat by using an arithmetic expression inside the parentheses, like nth-child(3n). They also stack, so you can create pseudorandom transformations to a sequence of elements by adding styles for the first few prime numbers.

Or nth-child(even), or nth-child(odd). (Keeping in mind that children are 1-indexed in CSS.)

Re: CSS Selectors: A Visual Guide

#38

Post by keepamovin »

10 years ago I created an algorithm to generalize CSS selectors based on applying the "sequence alignment" algorithm (from bioinformatics / string matching) to objects (bags of attribute / key values, ie, HTML elements). This let you select two or more examples and produce a selector that captures what you meant.

More here: https://github.com/00000o1/selector-generalization

There've been multiple attempts at such a thing over the years, but I like this approach for its essentially simple foundation in solid algorithms.

Be warned tho this code is old! I haven't yet got around to updating it to make it more "modern" etc!!

Re: CSS Selectors: A Visual Guide

#39

Post by lcnPylGDnU4H9OF »

mminer237 wrote: post #36

`* + *` works, but I think `:not(:first-child)` is a much clearer way of doing this. (Unless you need to support IE8 for some horrific reason?)

I assume the author is alluding to a certain blog post. https://alistapart.com/article/axiomatic-css-and-lobotomized...

To the point, the :not(:first-child) option should similarly be able to minimize the total number of rules.

Re: CSS Selectors: A Visual Guide

#40

Post by 6510 »

reaperducer wrote: post #11
hk1337 wrote: post #6

Very cool. It seems to be missing the begins with and ends with selectors for the attr-val. [title^=“old”] and [title$=“old”]

[title^=“old”] and [title$=“old”] Once you get used to using these, and their relatives, you find all kinds of uses for them, like applying styles only to telephone links: a[href^="tel:"]

You can do [data-foo*="banana"] and trigger it by changing the dataset to something that contains banana.

https://jsfiddle.net/gaby_de_wilde/s729uk61/

Post reply on HN