2

CSS Practices to avoid as a developer Pt.2

 2 years ago
source link: https://dev.to/mursalfk/css-practices-to-avoid-as-a-developer-pt2-94
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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.

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. 😉😉


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK