Learning to Love the Boring Bits of CSS

by Peter Gasston

27 Reader Comments

Back to the Article
  1. I’d be interested to know if there is a performance difference between using:

    li { color: #00F; }
    li:nth-child(odd) { color: #F00; }
    li:last-child { color: #00F; }

    vs using

    li { color: #00F; }
    li:nth-child(odd):not(:last-child) { color: #F00; }

    Copy & paste the code below to embed this comment.
  2. I’ve found that when doing responsive design, rem is easier to work with than px or %.  That seems to be where it really shows it’s usefulness.

    Copy & paste the code below to embed this comment.
  3. robweir and jblatch1 The advantage over px is that it’s a relative unit; you can change the value at any time and all of your length values which use rem will scale automatically. For example:

    html { font-size: 12px; }
    h1 { font-size: 2rem; } <- 24px
    h2 { font-size: 1.5rem; } <- 18px
    p { font-size: 1rem; } <- 12px

    html { font-size: 14px; }
    h1 { font-size: 2rem; } <- 28px
    h2 { font-size: 1.5rem; } <- 21px
    p { font-size: 1rem; } <- 14px

    The advantage over em is that it’s always relative to a fixed size, so you don’t get the 0.546728em problem.

    Copy & paste the code below to embed this comment.
  4. I love A List Apart because I can find folks like you who love CSS (as I do), and I can learn from their big, selector filled brains. Fun article. Thanks!

    Copy & paste the code below to embed this comment.
  5. Great article!

    “Can’t use it on a daily basis blabla”.
    That doesn’t count. It’s very important to have this new stuff and it’s important to have it now. People like Glow (first comment) won’t be satisfied until we have daily browser updates bringing the hot new features automatically to everyone in the world, which won’t be a good thing, I guess.

    Copy & paste the code below to embed this comment.
  6. I hadn’t ever heard of the root relative unit until now.

    I could see myself setting font-size to 1px on the html element, (overwriting it in body to a more sane base) and then using rem as a pixel replacement everywhere. for instance, instead of the 10px base as seen in the article and using 1.2rem for 12px, I would set 1px base and use 12rem for a 12px match.

    Are there pitfalls that I’m not thinking of off-hand?

    Copy & paste the code below to embed this comment.
  7. Yep, it simplifies the math a lot and in my opinion. The reason why EMs are not very popular is because having to work with multiple digits decimals is a pain in the neck. REM is exactly what EMs should have been in the first place.

    Copy & paste the code below to embed this comment.
  8. I was got excited when I came to read Viewport-relative lengths and calculated values. Unfortunately, Browser compatibility was the issue that I can use them in my projects. Anyways, It was good to read such useful informative article.

    Copy & paste the code below to embed this comment.
  9. This is an excellent and approachable session. Thanks for posting it.

    Copy & paste the code below to embed this comment.
  10. Thanks – very interesting. After years, I finally redesigned our web sites with CSS basically by playing around and looking up specific answers until things worked. Recently I updated a few pages with a new feature by sticking in a gasp one-column one-row table because I didn’t want to start all over with CSS, which I haven’t used in months.
    This inspires me to look into it again – and the descendents thing offers some great possibilities I hadn’t been aware of as swell.

    Copy & paste the code below to embed this comment.
  11. I think this is the part of the HTML story where these features and functions start to divide those who are HTML savvy into the amateurs and professionals.
    All very interesting stuff.

    Copy & paste the code below to embed this comment.
  12. Fortunately we have used CSS, and all we have to do is open our CSS file which stores the layout of the site, and change the number relating to the position of the image. That will change his position throughout the whole site. http://www.ahmedabadwebs.com

    Copy & paste the code below to embed this comment.
  13. I have habbit to use px values, it’s only matter of habit to change on rem value, but it’s good possibility to have these choice. Thing that i like most about CSS3 is that you can make “dynamic” effects almost like in Adobe Flash.

    Copy & paste the code below to embed this comment.
  14. Really a great post. All that looks really promising but as another user said, what about older versions of IE?
    I also think that pseudoclasses should be used only if you really need to because, when you have to modify/optimize some code made by others, it is always a pain to find appropriate selectors and so on.

    Copy & paste the code below to embed this comment.
  15. I love the :matches

    Copy & paste the code below to embed this comment.