0

I know this might sound crazy but for a small CSS experiment I ended up having to match a lot of selectors and I don't know how many there might be.

I made a codepen (based on an article from a list apart)

https://codepen.io/KADlancer/pen/gvEppr

Even though I can make SASS build all combinations I need, I don't want to end up having to include all combinations in my prod css file like this.

.state-1:checked ~ .panels .panel-1,
.state-2:checked ~ .panels .panel-2,
.state-3:checked ~ .panels .panel-3 {
    display: block;
}

Thats ok for 3 - 10 maybe but after that... it gets insane. I'd love to build something like this.

.state-[magicIndex]:checked ~ .panels .panel-[magicIndex] {
    display: block;
}
All Bits Equal
  • 731
  • 2
  • 10
  • 26
  • use sass or less – Temani Afif Mar 01 '18 at 18:29
  • Is it not possible to give all of a common class? – Huangism Mar 01 '18 at 18:31
  • The problem is you're attempting to use CSS to handle interactions that are better accounted for via JavaScript. – zzzzBov Mar 01 '18 at 18:32
  • At the moment, using a pre-processor will be the fastest way to get there, nothing, to my knowledge, allows you to replicate this in CSS "simply". So your SASS build is the best option, despite the longer CSS (use JS if you want to make that a bit cleaner). – chriskirknielsen Mar 01 '18 at 18:32
  • As far as I understand it - the OP's problem is with the final output which may end up with tons of CSS and is looking for a cleaner solution which won't output tons of lines to match all the selectors. Unfortunately there isn't a magic index selector in css. – Huangism Mar 01 '18 at 18:34
  • the challenge is that I'm trying to push the edge and not use JS for something that can easily be handled by CSS. I'm simply toying around with different options. – All Bits Equal Mar 01 '18 at 18:42
  • @Huangism exactly. I know how to build that with a preprocessor... the point is, I don't want to end up with that much CSS for a simple solution. The idea was to find a lightweight tab/accordion solution that can be used for both. If I have only tabs OR only an accordion, I can easily do that with minimal CSS and no JS. What I was trying to do was to find a setup where I can use CSS + Media Queries to decide on what breakpoint the layout is tabs (large/medium) and when I switch to accordion (small). I either end up with fixed height + position absolute or lots of CSS garbage. – All Bits Equal Mar 02 '18 at 07:58
  • it is possible to make a widget with the same or very close to the same code for tabs on desktop and accordion on mobile. You could style everything with css but I find it much easier and cleaner to use js just to add a class and when styling target that class so tabs and accordions styles don't cross over and it is easier to read for future devs – Huangism Mar 02 '18 at 14:17
  • I'm currently working on a solution using flex that largely accoplishes what I need so I'm gonna post that here as a codepen when I'm done – All Bits Equal Mar 05 '18 at 18:53

0 Answers0