Hubble - Background-size: cover; isn't DRY - Why?

HTML/CSS
1

I don’t understand why I must duplicate the property background-size: cover; for each @media query - That violates the DRY principle.

I thought the only properties I need to include in each @media are those that change from the original definition of the container.

What don’t I understand?

Doran

2

.hero {
background: url(…/images/cosmos_jq7x9h_c_scale,w_500.jpg) no-repeat; /* sets the background image and imposes no-repeat /
letter-spacing: 1.5px;
height: 100vh; / fills the screen vertically /
background-size: cover; / fills the screen horizontally /
color: white;
display: flex;
flex-direction: column;
justify-content: center; / center the text vertically in the container /
text-align: center; / center the text horizontally in the container */
text-shadow: 2px 2px 0 #000;
}
h1, .tagline {
margin:0.5rem; /*this doesn’t work at the html, body, or .hero level - I don’t know why /
}
h1 {
font-weight: 900;
font-size: 4rem;
text-transform: uppercase;
word-spacing: 1.5rem;
}
.tagline {
font-size: 2.7rem;
font-weight: 300;
word-spacing: 1.1rem;
}
@media screen and (min-width: 500px) {
.hero{
background: url(…/images/cosmos_jq7x9h_c_scale,w_952.jpg) no-repeat;
background-size: cover; / fills the screen horizontally */
}
H1 {
font-size: 4.5rem;
}
.tagline {
font-size: 3.2rem;
}

3

Shouldn’t need to repeat take it off and see what happens

4

Tried that first. Didn’t work. Mosh has it repeated on each @media.

I added it on each on my stylesheet and now it works

5

I would think if you had it outside of a media query it would apply inside one unless overridden.

6

u were right, I thought I deleted it but it was the wrong file. You can’t consider it DRY because whenever you use a background, it is a short hand for background image, background size, background image, background color, etc. So you are basically resetting everytime you use it. if you still don’t want to repeat it, you can try changing the following.

.hero {

background-image: url(…/images/background_w320.jpg);
background-repeat: no-repeat;
background-size: cover;
}
@media screen and (min-width: 768px) {
.hero {
background-image: contain url(…/images/background_w853.jpg);

}

}
}

1 Like
7

You learned on of the most important developer skills, attention to detail lol. Many a time i sat at my screen for a while trying to edit styles only to realize i forgot to save, import the style, or i used the wrong class.

Oh you can look into srcset too that’s a super fun way to change image sizes if your not a fan of media queries.

1 Like
8

I think you go a bit too far about it.

Please don’t fall in the banal rigidity about “rules”.
That’s actually wrong and impractical.

I am afraid this mindset leads to over-quality and other bad things.
We strive for the best but there is no absolute.

I particularly say that because as a learning person your code style won’t be “perfect” and that’s alright. Worrying too much about those things will actually slow you down. For you might more or less fall in the perverse mindset “perfect” or nothing. The secret sauce to waste your time. Accept being a learning person. Even myself with a few years of code, my style has room for improvement. I can clearly see the gap between me and the project manager I work with.
With that being said, I am not saying you shouldn’t care. Just go your pace
Push a bit, but not too much

I think there is at least a part that indeed do not need (from what I see) to be repeated. background-size is the same in both parts of the code.

Now imagine you’d have an extra media query where the value would have been different. Then you must repeat it to make sure the rule is properly applied when the conditions changes.

I would say some would write it anyway “in case of” they fall in this situation because they know this property would be mandatory to work as expected (and then some would argue it does not respect YAGNI principle :smiley: )

CSS is maybe not that much a language where you need to be so rigid about DRY. Especially when you seem to look at statement granularity.

CSS is not a programming language but a syntax to describe the visual aspect of a web page primarily.

There are ways to mitigate code duplication and I can see it in the very code snippet you shared.

The following factorize the property for several rulesets for instance.

h1, .tagline {
    margin:0.5rem;
}

There are other technologies to produce CSS such as SASS or LESS (did not work with that last one myself). You can nest properties and IMHO it makes more sense at coding step. But thenafter the code generated (back to CSS) is likely to have repetitions anyway. And to be honest we don’t care as long as it works.

CSS allows to import other CSS files too. For instance I usually setup a CSS for constants when I work with it. Especially for colours it is handy.

Going back to the statement about granularity, it is a bit like worrying about code duplication for the following code

Consider each instance of // Any code is different.

public void DisplayMessage1()
{
    // Any code
    Console.WriteLine($"This is message 1");
    // Any code
}

public void DisplayMessage2()
{
    // Any code
    Console.WriteLine($"This is message 2");
    // Any code
}

Though very close, there is no code duplication here. The messages are different. That’s it. Just like the url in the background property is close yet different.

Hope this helps.

Cheers

1 Like