DEV Community

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

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 ...
Collapse
 
nataliedeweerd profile image
𝐍𝐚𝐭𝐚π₯𝐒𝐞 𝐝𝐞 π–πžπžπ«π • Edited
  1. 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...

Collapse
 
murkrage profile image
Mike Ekkel

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.

Collapse
 
webdeasy profile image
webdeasy.de

Yes, that's absolutely ok! :)

Collapse
 
rumkin profile image
Paul Rumkin • Edited

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

Collapse
 
webdeasy profile image
webdeasy.de

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.

Collapse
 
lawrencejohnson profile image
Lawrence • 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.

Collapse
 
webdeasy profile image
webdeasy.de

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! :)

Collapse
 
rmwthorne profile image
Ross Thorne

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

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

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>
Collapse
 
webdeasy profile image
webdeasy.de

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

Collapse
 
patke92 profile image
Patrick Keßler

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

Collapse
 
lawrencejohnson profile image
Lawrence

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.

Collapse
 
patke92 profile image
Patrick Keßler

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

Collapse
 
webdeasy profile image
webdeasy.de

Sometimes...yes! :o

Collapse
 
dancsee89 profile image
Daniel Molnar

To style resets part:

You should always choose HTML tags by their semantic purpose, not by their appearance.

Collapse
 
robkohr profile image
RobKohr

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.

Collapse
 
jijii03 profile image
lincey.J

Well I've learn htlm css in school and the teacher didn't mention the
"!Important" thing πŸ˜‚

Collapse
 
sinteticwizard profile image
Ramon Ramirez

excelent