18 comments

  • Florian GrauFlorian Grau, 24 days ago

    The way he mentions and tries to sell his course throughout the article makes the article appear more shady than it actually is.

    4 points
  • Diego LafuenteDiego Lafuente, 24 days ago

    I don't understand the aversion with the px vs rem thing. Seriously, it's a really minor thing. I never saw anything broken or fugly by using px, I saw thousands of counterexamples by using relatives.

    Plus, it encourages the naming scheme, while that technique is already out of date and it's the main reason the websites render 300% less faster and carry so many CSS legacy changes for nothing.

    3 points
    • , 24 days ago

      px units are perfectly fine in many situations! I use the title as an imprecise but memorable shorthand for "describe elements in relative terms (brick B should be as big as brick A) instead of absolute terms (brick B is a 200px-by-400px rectangle)". You could make the same mistake using rem, by saying "brick B is a 20rem-by-40rem rectangle" when brick B doesn't have any relative relationship to the root-em size.

      0 points
    • Marc EdwardsMarc Edwards, 24 days ago

      I agree. Using px is totally fine. If you want to use ems or rems, that’s totally fine as well. They all resolve to display pixels (which is different to CSS px). Mixing them is also fine (as long as you have good reasons to do so).

      In my opinion, a cultish pursuit of “Pixel Perfect” design will cost you in significant extra code complexity to deal with these inconsistent rendering schemes (along with the increased risks of bugs that result from complex code) for a small benefit that will probably get washed out once the next generation of devices, operating system versions, and browser versions get released.

      If you use px, then making px perfect designs is actually easy. :P Apart from font rendering, which is always going to vary across browsers, layout is fairly easy to get identical across browsers.

      CSS’ px is the direct equivalent to iOS’ points and Android’s dp.

      Mistake #4: Designing for desktop before mobile

      I don’t agree with this one either. Yes, you should consider mobile and desktop and small and large displays as part of your process. I personally find it easier to build multi-column layouts first, then make them collapse to a single column (mobile!). Others may choose to work the other way around. I don‘t think either is wrong. You have to do both anyway.

      Also, let’s not just consider large displays to be “desktop”. iPads are pretty big these days. Some of Surface line can convert to a tablet. This isn’t about phones versus computers any more.

      3 points
      • Diego LafuenteDiego Lafuente, 24 days ago

        "Hammering" designs can be done but they're a risk. Usually, everything starts to break down. I preffer to serve a different, more concise, mobile UI to the user than trying to make a desktop design fit into the phone.

        0 points
        • Marc EdwardsMarc Edwards, 24 days ago

          I think it largely depends on the situation and what’s required. For a complex nav, a totally different version might be smart. For a page with an article and a sidebar? I’m all for just overriding some CSS with a media query. YMMV.

          0 points
  • Liam FLiam F, 24 days ago

    I rolled by eyes at "deadly css mistakes" BUT this article is quite good and outlines some mistakes I have made (that I live to regret) and some others have made that have made me pull my hair out for.

    Certainly been in a situation where I have had to try and fix some other's code which was: .main > div .col:nth-child(2) { width: 30% }

    ...

    2 points
    • , 24 days ago

      Indeed it's quite frustrating to see some overspecified selector like .main > div .col:nth-child(2). It just leads to a specificity war if you try to override it; like stockpiling nuclear weapons, no one wins the war, it only becomes harder to de-escalate.

      0 points
      • Liam FLiam F, 24 days ago

        Yeah I think we all have a few horror stories of HTML/CSS haha

        0 points
  • Taylor PalmerTaylor Palmer, 24 days ago

    Some of these are wise, but I stopped at #6 when it recommended surrounding an element with non-breaking spaces to center it in a page but never once mentioned flexbox

    2 points
    • Marc EdwardsMarc Edwards, 24 days ago

      When would using   to center something ever be an acceptable solution?

      And I agree, flexbox and grid are very well supported now, and should likely be part of your main layout tools.

      3 points
    • Ben GiffordBen Gifford, 23 days ago

      That's not quite fair: the author didn't recommend that, and was instead attempting to illustrate the challenge of a system where there are multiple possible—and allowed—ways of achieving the same perceived end result.

      0 points
      • Taylor PalmerTaylor Palmer, 22 days ago

        True, probably not quite fair, but they did say any of those could be “perfectly acceptable solutions.”

        0 points
  • Thomas Michael SemmlerThomas Michael Semmler, 24 days ago

    this is an ad, plain and simple. None of these are mistakes, they are features of the language. They are not mistakes. You just need to use consciously, which often is not possible without a bit of experience.

    1 point
  • Diego LafuenteDiego Lafuente, 24 days ago

    Anyone trying to improve their CSS should read an article i did http://minid.net/2019/04/07/the-css-utilitarian-methodology/ give Functional CSS a good try and you will see what it's like to have performance, good architecture and results.

    1 point
  • Adam Fisher-CoxAdam Fisher-Cox, 16 days ago

    "People love to extol the “mobile first” philosophy but they forget that “mobile first” implies desktop is a second-class citizen. Instead, the “mobile first” champions behave in the opposite manner, by writing code for desktop first and then later trying to cram the site into a phone. They use @media queries to handle the exceptional cases on mobile, but really desktop should be the exceptional case."

    This doesn't make any sense. You're not extolling mobile first if you're designing desktop first.

    0 points