Learn More
Resend Email
12
0and1
5y

Usually my workplace is pretty chill, but today something rantworthy happened!

During code review, I found this guy had styled each element inside his components using nth-child selectors. For instance, in a card the heading was styled by nth-child(1), the text was styled by nth-child(2) and so on... No use of actual fucking classnames.

When I pointed this out, he told me it was actually the better way of doing things because classnames increase the size of the HTML document!

He also claimed proudly that nth-child() is more efficient in performance (idk - anybody can confirm this?)

I'm the only "css guy" there so nobody could second my views. Posting it here so that I can show this to him tomorrow by demonstrating what opinion other css devs have on this and prove my concerns / convince him to change his code.

rant

css

review

coworker

code review

fuck

opinion
Favorite
Ranter
Comments
  • 1
    5y
    Oh my :D
  • 1
    5y
    It's common practice in css GRID Layout tho.
  • 6
    5y
    @heyheni yeah well it was nothing grid related. It's like you style a simple card component but do the css without class names.

    I mean what if someone has to change something layout. Then the design is wrecked at once, as everything is selected using its index in the dom.
  • 10
    5y
    Separation of concerns: any change in markup will break his styles. Adding a new link/div will require changing all of that markup's associated css. There's a reason they're separate.

    As for "efficiency"... what's the goal here? To have your page rendered a few ms faster? Minifying your css has more of an effect due to reduced download times. Or replacing that png with a jpg.

    Also: what an unmaintainable mess. I'd have him take a css/design course. If that didn't teach him better practices, he wouldn't get to do design projects again.
  • 1
    5y
    @Root ikr! Thank you!!
  • 5
    5y
    @0and1 there is one additional point I guess...

    With nth-child you have no fucking clue what the shit should be doing....

    div > p:nth-child(1)

    vs

    .p-headline

    And really. I don't wanna think about large pages, eg. search formulars, without descriptive naming....

    It reminds me of using goto with Line numbers.

    Pot hitting in a mine field....
  • 4
    5y
    That's total BS. The actual use case for such an iterator is repeating patterns, like alternating table row background colours so that the table is easier to read. But not to make spaghetti markup.
Related Rants
devRant © 2021 Hexical Labs LLC
Privacy Policy  |  Terms of Service
Add Comment