Learn Responsive Design | Exercise 8 Question | Redundant Code?


#1

Working through this lesson, I noticed there are 2 places in the stylesheet that edit the properties of images: once in the /* Universal Styles */ Section and again in the /* Blog Images */ Section (I’m using the term sections as the portions of CSS delineated by the comments).

The Question

Since the aforementioned code edits the same classes, is it simply “poorly written” (in this particular instance) to have it split up between two “sections” of the stylesheet, or is there some type of hierarchy/parent-child relationship thing that makes this more important than I can tell?

Context for My Brain

I understand why this splitting-the-code-up-across-multiple-sections could make sense in a real-world setting, but for the purposes of this practice course, it is confusing. The CSS implies that they are editing the same classes (.image, .image-container) but in two different places, and I’m not familiar enough with parent-child relationships within CSS to know if that’s even a line of thinking worth pursuing.


#2

It has to do with child-parent relation ship.

example:

.image{
}

Would give CSS to every element with the class image regardless if it has a parent or not.

Another example:

.image-container .image{
}

Would add CSS to every element with the class name image that also has a parent with the class name image-container.
This means that elements with the class name image that don’t have a parent with the class name image-container would not get this CSS.

Another way of getting the same results would be:

.image-container{
    //css for parent
    .image{
         //css for child of .image-container
    }
}

This is usually not used by beginners since it could be confusing. But it could also clarify things since you will get a visual of a tree view(which might make the parent child relation more clear).
In case the parent doesn’t have any own CSS you could simplify it:

.image-container .image{
    //css for child of .image-container
}

Its opinion based tho. Both are acceptable ways of creating CSS


#3

Perhaps I wasn’t clear. I totally get what you explained but the code in the lesson (and my point of confusion) is more like the following:

/* Universal Styles */

.image-container {

}

img {

}

/* Blog Images */

.image-container {

}

img {

}

And I am wondering why they exist under two different section headings even though they seem to be editing the same HTML classes/things.


#4

Yea that seems dirty. They probably did that because of the commenting, so you can clearly see what piece of css does what to what element. Even tho it is the same element.

I could see benefit in this way if you just want to add something to an exciting file where the class already exist and you don’t want to read the whole css file. Its kind of a lazy way tho since “ctrl+f” will find you the class for you.

I would advise to not use this style. It will cloud your css file real quickly and you will probably get a mess once you start to overwrite properties.

I agree, this can be very confusing if you already know some css but are still learning.

Watch out tho, the lesson you provided in the link has the flowing css:

/* Universal Styles */
.image-container {
  
}

.image-container img {
  
}
/* Blog Images */

.images {
  
}

.images .image-container {
  display: inline-block;
  
}

This can not be compared to the code you gave.

for example img is not the same as .images
img reffers to the <img/> element while .images reffers to any element with the classname .images

This means that in the link to the lesson you gave there doesn’t seem to be anything wrong with the css


#5

Apparently I’m just a poor reader. Missed the unfortunately small detail of it being a .image class and a .images (plural) class. That just feels like a bad (although understandable) naming convention. Thanks for clearing that up for me.