The best practices or new techniques ?
Stas Melnikov
ć»1 min read
Hi friends. Iād like to show you some code snippet that I use in my projects.
<figure style="--figureRatio: 62.2222%; --figureMaxWidth: 1200px;">
<div class="media-placeholder">
<img src="example.jpg" alt>
</div>
</figure>
.media-placeholder::before {
padding-top: var(--figureRatio) !important;
}
What do you think about this code ?
I'm sure that where are people that will say, "Stas, don't use !important. This isn't the best practice".
Yes, we have practices and they are really useful. But often I see that they limit our thinking. We don't explore reasons why people use not be popular techniques.
I did that too. I knew about the CSS in JS practice a few years ago and thought, What's it? It's a bad practice. I said that it's bad without exploring reasons in which developers did it. Such thinking limited me.
So I think we must explore popular solutions. But if we continue to comment new techniques without exploring reasons, we'll lose something that could be useful.
P.S: The code snippets from this post are used to customize the CSS component which I use to display images.
Stas Melnikov
Patreon blogger. I'm looking for my fans which I'll give away everything I know. If you're interested then join to me on Patreon š https://www.patreon.com/melnik909
melnik909
melnik909
www.patreon.com/melnik909
141
7
Tip: You can configure your dev.to reading experience, such as using sans serif fonts.
Go to your the "misc." section of your settings.
Customize dev.to
Auth With Twitter
Auth With GitHub
I can't help but ask, why is !important needed here? Perhaps the fact that it is needed is the bad practice, not the use itself
I'm use it that to be sure that styles can't be overridden other styles. For example, I can use this module on dev.to and I know it will work.
A more unique class name, or ID selector would take care of that issue.
To be honest, I'm more troubled by the empty
altattribute than the use of!important.!importantjust makes your own life harder. The emptyaltmakes some of your users lives harder.Which text would you use in this case ?
"An example" maybe. Since you have used an
<img>element in HTML and not a background image in CSS, you're indicating that it's content pertinent to the page. By adding an empty alt attribute, you're hiding that content from screen readers, so their users won't even know that an image is present. It's generally regarded that unsighted users should at least be aware of a image's presence so that they might discuss it with others.