DEV Community

You should avoid these 7 CSS No-Gos! ☝️

webdeasy.de on September 01, 2019

Updated version is available (click)! 🔥 Again and again one reads CSS tips and what one must consider in order to create fancy websites ...

Read full post

𝐍𝐚𝐭𝐚𝐥𝐢𝐞 𝐝𝐞 𝐖𝐞𝐞𝐫𝐝 • Sep 2 '19 • Edited

Style-Resets

I disagree. By resetting the styles you create uniformity between all browsers. Yes you may have to set them again, but it gives you complete control. I use a modified version of meyerweb's reset CSS, which resets, then sets key elements. Here's a link if you're curious: github.com/nataliedeweerd/blank_we...

Mike Ekkel • Sep 2 '19

I agree with this. To add to that using the example given in this post: a paragraph may have been designed a specific way for my project, let's say with 2em of margin at the top and bottom. I would definitely want to reflect that in my code, which means overwriting the default styling.

webdeasy.de • Sep 2 '19

Yes, that's absolutely ok! :)

Paul Rumkin • Sep 2 '19 • Edited

There exist two technics: style nullifying (reset.css) and definition of default styles for all browsers (normalize.css). The second option is preferable.

webdeasy.de • Sep 2 '19

That's why I have noted that these are my ideas of "good" CSS. :)

But thank you for your comment, I think that many have such a view. I don't think that additional styles require resets anymore.

Lawrence • Sep 2 '19 • Edited

I think you need to reassess your concept of how much space and bandwidth things like empty selectors actually consume. First, unless you have 50+ unused selectors, you'd be unlikely to see more than a 10ms increase in download time. Css is also cached and compressed if configured properly, so the size is significantly less (0 aside from initial load). They are good points from a readability standpoint, but there are much smarter ways to optimizing performance than worrying about a few dozen characters in a css file.

webdeasy.de • Sep 2 '19

I know it's only a very small fraction. But it also has something to do with clean code and helps to make it easier to read or search the code.

Anyway, thanks for your comment! :)

Ross Thorne • Sep 2 '19

p.color-red is illustrative, I can see why you've used it, but generally you want to avoid naming your styles so tightly coupled to their appearance. What if you change your colour palette? Sure changing one class name should be simple, but you don't want it littered all over the place.
Using a more semantic description like p.accent should be preferable

Taufik Nurrohman • Sep 2 '19

It depends. Some functional CSS classes use the same name as the HTML tag name not to be used on that tag but to be used on other tags so that the display will looks the same. One example is the .button class. Although some controversial opinions about .button and .btn had emerged along with the HTML5 semantic trend in the past.

Other examples:

.h1 {}
.h2 {}
.h3 {}
.h4 {}
.h5 {}
.h6 {}
.code {}

I use .p class as well just to make sure that some embed code in the paragraph flow will have sufficient margin. And in my opinion, it is better than that .mt-1 and .mb-1 class name.

<p>aaa</p>
<iframe class="p"></iframe>
<p>aaa</p>

webdeasy.de • Sep 2 '19

Good point! A possibility I hadn't thought of, but it makes sense.

Patrick Keßler • Sep 2 '19

Oh god, WordPress themes... Current problem with the project I work on. Horrible.

Lawrence • Sep 2 '19

Doesn't actually have anything to do with WP. It's a matter of the poor development done by whoever created the theme. You can find this problem on any platform even custom developed ones.

Patrick Keßler • Sep 2 '19

I'm talking (bad) themes in general. Not working with WP.

webdeasy.de • Sep 2 '19

Sometimes...yes! :o

RobKohr • Sep 3 '19

Naming classes based on their style such as .color-red is wrong in most cases. Stick to more semantic ones like .error-message. Ask, why should this be red, and then name it based on that.