Item — HN Reader

Looks like a great utility, but the output css isn't very compact. For example,

  ul li:nth-child(1) {
    background: red
  }

  ul li:nth-child(2) {
    background: red
  }

  ul li:nth-child(3) {
    background: red
  }

should just be

  ul li:nth-child(1),
  ul li:nth-child(2),
  ul li:nth-child(3) {
    background: red
  }

Also, it's not very clear how to download the family.scss file, it's buried deep in an oddly named subfolder in the repo.

4 comments

What would be even better is this:

    ul li:nth-child(-n + 3) {
        background: red;
    }

See the last example on this page: https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Wow, thanks for this one, updating now! :o

I assume that this is your github profile ? https://github.com/JelteF

Yup

It might not be compact but the gzipped size is the same.

    $ cat <<EOF | gzip | wc -c
    ul li:nth-child(1) {
      background: red
    }

    ul li:nth-child(2) {
      background: red
    }

    ul li:nth-child(3) {
      background: red
    }
    EOF

    71 # bytes

    $ cat <<EOF | gzip | wc -c
    ul li:nth-child(1),
    ul li:nth-child(2),
    ul li:nth-child(3) {
      background: red
    }
    EOF

    71 # bytes

Hey @tobr, Thanks for your feedback, and you're right! I'll work on it for a next update.

For the download part, I think it's better to get the user to the folder where he can find the file in two different versions. But I take it in consideration and I'll try to improve that part.

Totally right. I made a PR to the repo showing a way to fix it: https://github.com/LukyVj/family.scss/pull/1