DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Mursal Furqan Kumbhar
Mursal Furqan Kumbhar

Posted on

CSS Practices to avoid as a developer Pt.2

So after an awesome response on my previous article titled CSS Practices to avoid as a developer, I am back with part 2 of the same, with some more awesome topics.

Img

Use Transform: Translate(-50%, 50%) to center

In particular, one solution was to use a combination of Absolute Positioning and the Transform property. This technique caused blurry text issues in Chromium-Based Browsers. We can use margin: auto, inside a flex container and the browser will center the element. Just two simple properties, and that's it.
For example: Instead of using

.parent{
     position: relative;
}

.child {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, 50%);
}
Enter fullscreen mode Exit fullscreen mode

we can use:

.parent{
     position: flex;
}

.child {
     margin: auto;
}
Enter fullscreen mode Exit fullscreen mode

!Important is unnecessarily used in most places

In CSS, styles are cascading, or overlapping from the top of one to another. But, when you bring down !Important in between, it will dominate the others and as the name suggests, it will establish that it is important over the other. JUST DON'T USE IT UNNECESSARILY.
For example: Instead of using

.parent {
     background: red !important;
     color: #fff !important;
     font-weight: bold !important;
}
Enter fullscreen mode Exit fullscreen mode

this method is preferred

.parent {
     background: red;
     color: #fff;
     font-weight: bold;
}
Enter fullscreen mode Exit fullscreen mode

NOTE: In most of the cases, you need to realign some new classes, and !important can be used when the realign is not possible.

Long Selectors #..#..... {}

Not only is this selector using Ids, it's also LONG. Just like Ids, if you are using long selectors (that are greater than three levels deep) you're increasing specificity. As a result, you'll be compounding the problem over time as regular maintenance and updates occur.
So instead of using this:

#header #title .left-side img.logo{
     opacity: .5;
}
Enter fullscreen mode Exit fullscreen mode

We should try using this:

.logo{
     opacity: .5;
}
Enter fullscreen mode Exit fullscreen mode

Inline styles in CSS

Although CSS offers us to maintain styles inline too, being a developer, we should skip the practice of using them.
Hence, instead of using

<button style="outline: none;">
     Login
</button>
Enter fullscreen mode Exit fullscreen mode

We can start using

<button class="login_btn">
     Login
</button>
Enter fullscreen mode Exit fullscreen mode
.login_btn {
    outline: none;
}
Enter fullscreen mode Exit fullscreen mode

Well, so that was all for this article. Do share below in the comments what more practices in CSS you consider as BAD being a developer. πŸ˜‰πŸ˜‰

IMG

Top comments (0)

Classic DEV Post:

Understanding git through images