Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

CSS: The bad bits and how to avoid them

joeforshaw.com

Post reply on HN
Print view View original

51–60 of 109 posts

Re: CSS: The bad bits and how to avoid them

#51

Post by pg_bot »

commandlinefan wrote: post #10
magic_beans wrote: post #2

The world really doesn't need another "What to Avoid with CSS" list. This list also assumes the use of a CSS pre-processor.

Well, I liked it. I had never heard of BEM before, either, so I'll definitely take a look at that. What gets me about CSS is that, in spite of having used it now for about 20 years, I still don't have an intuitive feel for it. With everything else I work with, I start out with an experimental approach: if I change this, I see this, if I change that, I see this other thing; after usually a few weeks of experimentation…

It's getting better as of late. I would spend some time reading up on flexbox and css grid if you haven't.

Re: CSS: The bad bits and how to avoid them

#52

Post by bluetwo »

ars wrote: post #26
bluetwo wrote: post #13

Earlier quoted context omitted.

Sure, the author is describing good practice, not best practice. If you have a choice, use class, then if you need to modify a specific use of the class, use id. I would still use .footer instead of #footer. Of course you should consider as well.

> I would still use .footer instead of #footer Why?

I agree with other poster.

For me it's a matter of doing things the same way so when I need to make an update to the code in a year it's intuitive.

"Be kind to your future self" is my motto.

Re: CSS: The bad bits and how to avoid them

#53

Post by RobertRoberts »

dsego wrote: post #29
RobertRoberts wrote: post #23

Earlier quoted context omitted.

> One bad thing about CSS is cascading. This is an odd statement, considering that the C is CSS is "cascading". Maybe it's a perspective issue, because I really enjoy the cascading part of CSS. Don't you think it's better that we _don't_ have to set a color for each element/child element individually?

I know C in CSS is cascading, that doesn't make it a good feature. I think it's one of the big reasons that the web is slow and bloated. CSS is needlessly complex, no wonder it takes herculean efforts from browser vendors to keep up with the exploding complexities [1]. [1] https://hacks.mozilla.org/2017/08/inside-a-super-fast-css-en...

I don't think the web is slow or bloated, only individual websites are slow or bloated. CSS is absolutely brilliant, and from what I have read, Javascript is the main culprit for badly performing websites.

I don't think a solid argument can be made that because the CSS rendering engine is complicated that it's not performant. Chrome documentation says it's possible to target 60fps with CSS/JS animations.[0]

[0] https://developers.google.com/web/fundamentals/performance/r...

Re: CSS: The bad bits and how to avoid them

#54

Post by jmsuth »

romaniv wrote: post #35

Never understood why people prefer verbose and repetitive BEM classes over custom properties and appropriate CSS selectors. becomes This solves for specificity, and uses built-in CSS features instead of a "manual" workaround.

This isn't a realistic example of how you should use BEM, you would never have a block, element, and modifier in one class. The "block" class would be used in a div that wraps the elements:

    
        
            I am an item
        
        
            I am a dangerous item
Your simplification relies on an HTML hack and can potentially be more confusing when modifier names start colliding.

Re: CSS: The bad bits and how to avoid them

#55

Post by mozumder »

drinchev wrote: post #9

I'm a huge fan of 1 & 2, so I end up using CSS with only class names. This helped me deliver maintainable and reliable stylesheets that other devs like. Most importantly using only class names you will gain : 1. Your HTML / CSS is easier to maintain. 2. Is faster to develop. 3. Is faster to refactor. 4. Is more portable. 5. Is faster for the browser. I even wrote a blog post about it [1]. http://www.drinchev.com/blog…

ID is faster than CLASS for the browser, especially when selecting by ID in Javascript.

Re: CSS: The bad bits and how to avoid them

#56

Post by mozumder »

dfabulich wrote: post #5

The advice to use CSS variables to handle Z-index confusion is a good first step, but IME that's only the right way to handle global z-indexes like modal lightboxes and menus. For local z-indexes, you should also know how and when to create a new stacking context with position: relative. This is the go-to article I send to newbies struggling with z-index. https://hackernoon.com/my-approach-to-using-z-index-eca67feb..…

CSS Flexbox and CSS Grid allows one to reorder elements to avoid Z-index problems as well.

Re: CSS: The bad bits and how to avoid them

#57

Post by wvenable »

naasking wrote: post #43
wvenable wrote: post #40

Earlier quoted context omitted.

But your HTML is uglier.

So? The only people looking at your html classes are you and your team. Bots don't process css, and most people don't look at html.

The same people looking and working on the CSS are the same people looking and working on the HTML. HTML full of long complex class names is a bit harder to grok.

I actually prefer nice semantic HTML but I admit that's not always possible.

Re: CSS: The bad bits and how to avoid them

#58

Post by ars »

morley wrote: post #31
ars wrote: post #26

Earlier quoted context omitted.

> I would still use .footer instead of #footer Why?

I think the preference against ids is covered over point #2 about specificity. id styles will always override class styles, so when you're trying to apply a class-based style guide to an element that's already been styled with an id, you end up having to use !important which just creates a similar specificity problem for someone else down the line. Of course, you can still do this if you want to. To quote Chris Rock,…

If it's been styled with an id then it's already specially called out in the CSS.

Either remove that, or add the id to the selector with the style.

Post reply on HN