This content originally appeared on DEV Community and was authored by Mursal Furqan
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%);
}
we can use:
.parent{
position: flex;
}
.child {
margin: auto;
}
!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;
}
this method is preferred
.parent {
background: red;
color: #fff;
font-weight: bold;
}
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;
}
We should try using this:
.logo{
opacity: .5;
}
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>
We can start using
<button class="login_btn">
Login
</button>
.login_btn {
outline: none;
}
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. 😉😉
This content originally appeared on DEV Community and was authored by Mursal Furqan
Mursal Furqan | Sciencx (2021-12-18T08:14:46+00:00) CSS Practices to avoid as a developer Pt.2. Retrieved from https://www.scien.cx/2021/12/18/css-practices-to-avoid-as-a-developer-pt-2/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.