Foundations: This course should tell students about the initial values of CSS

[user9169747]

Checks

• [x] This is not a duplicate of an existing issue (please have a look through our open issues list to make sure)
• [x] I have thoroughly read and understand The Odin Project Contributing Guide
• [ ] Would you like to work on this issue?

Describe your suggestion

TLDR

The CSS potion of the Foundations path doesn't explain that every CSS property has a default initial value, which may lead students to a incorrect understanding of CSS.

Explanation

In this potion you state that:

In the following example the flex shorthand has values for flex-shrink and flex-basis specified with their default values.

This made me think that the flex: 1 1 0%; was the default value flex value for every flex item. Going forward here I couldn't understand why, without the flex property on .item it wasn't behaving like: flex: 1 1 0%;. I realize now that in the statement referred above, you are talking about the flex: 1 shorthand, and not the default value. Then I searched if without flex property it has a default value, which lead me to the mozilla.org link. After reading the Mozilla documentation I know that flex: 0 1 auto; is the default value for every flex item and I think it should be mentioned in the course.

Path

Foundations

Lesson Url

https://www.theodinproject.com/paths/foundations/courses/foundations#css-foundations

(Optional) Discord Name

No response

(Optional) Additional Comments

No response

[Borrispooman]

Can i work on this issue?

[mao-sz]

Thanks @user9169747. Just a technicality, flex is only a shorthand property i.e. a streamlined alternative to setting the individual flex-grow, flex-shrink and flex-basis properties. flex itself doesn't have an initial value but those individual properties do.

I had a think about where a mention of initial values can go in the lessons. This doesn't need a big mention at all, as it's something most people will discover via docs at some point early on. Currently, "Inheritance" in the Cascade lesson is where the Formal Definition docs section is introduced, which js where you'll also find initial value information. I think that sentence could be tweaked to also briefly mention what else can be found there e.g.

You can find out if a property is inherited or not by going to its docs on MDN and heading to the Formal Definition section, where you'll also find other useful information such as a property's initial value and what types of elements a property can affect. For example, the CSS color property formal definition indicates that color is an inherited property, while the display property formal definition indicates that display is not.

How does that sound to you?

[user9169747]

@mao-sz I think it's important for the foundation course to mention somewhere, maybe in The Cascade chapter that every CSS property has an initial value which it defaults to if it's not set by the user. I don't think it requires a whole section for itself like inheritance does.

After searching a bit for an answer of "Does every CSS property has default value and if it does how's it set?", I found out that the CSS 3 specs mention the defaulting process for a CSS property here.

I would've liked the course to mention this where the CSS properties and values are defined but I think the course didn't dedicate a section to define those. So then, I thought it's better to mention the defaulting process in Properties to get started with section, but I think students shouldn't think about defaulting process that early in the course so next best choice is Inheritance. I'll would just tell students to keep in mind that every CSS property has a default value. I'm just editing your suggestion a bit by adding the bold text section which in the final result doesn't need to be bold.

Inheritance refers to certain CSS properties that, when applied to an element, are inherited by that element’s descendants, even if we don’t explicitly write a rule for those descendants. Typography-based properties (color, font-size, font-family, etc.) are usually inherited, while most other properties aren’t. Also note, that every CSS property that you don't set default's to a initial value which is set by the browser. You can find out if a property is inherited or not by going to its docs on MDN and heading to the Formal Definition section, where you'll also find other useful information such as a property's initial value and what types of elements a property can affect. For example, the CSS color property formal definition indicates that color is an inherited property, while the display property formal definition indicates that display is not.

[user9169747]

Or maybe the course should add a section to explain defaulting behavior because it's important in order to understand how CSS works.

[mao-sz]

We don't need much on it - the concept of an initial value is mostly intuitive, given you can observe it yourself from the get go with any property. I don't think the inheritance section is the best place for the bit you added in bold. I think if we leave that section as it is (removing my suggested changes as well) and make a mention in the Intro's "Properties to get started with" section, that should suffice. e.g. first para

There are some CSS properties that you’re going to be using all the time, or at the very least more often than not. We’re going to introduce you to several of these properties, though this is by no means a complete list. Learning the following properties will be enough to help get you started. Note that all properties will have a default initial value, which will be used if neither you nor the browser has set a different value (MDN docs for each CSS property will detail these).

[user9169747]

@mao-sz It'll basically tell the students the process of defaulting so it's good for a foundational course.

[mao-sz]

Initial values aren't so obscure a concept in general that they need any significant mention. There will be loads of specifics and little behaviours that TOP can't reasonably cover them all, and learners will have to research on their own anyway when they encounter problems. Half the people reading lessons will forget most of it by the time they reach a project, then they'll have to research to solve problems (as is expected), including something like seeing something behave differently to what you thought (because of a different initial value from what you assumed, say).

@Borrispooman is this still something you wish to work on? Let me know and I can assign you if so.

See my previous comment for details.

[Nayab-Gauhar]

Hi! I'd like to work on this issue for Hacktoberfest if @Borrispooman is no longer interested. I can add a brief mention about CSS initial values in the "Properties to get started with" section as suggested by @mao-sz. The proposed change is clear and straightforward - it will help students understand that properties have default initial values without overwhelming them with technical details. Could you please assign this to me if it becomes available? Thanks!

[CouchofTomato]

Since we haven't heard back I'm happy for you to take it @Nayab-Gauhar

[mao-sz]

Unassigning - echoing thoughts in https://github.com/TheOdinProject/curriculum/issues/30253#issuecomment-3547303239

Acceptance criteria

• [ ] Reword as per https://github.com/TheOdinProject/curriculum/issues/30187#issuecomment-3423802882

Comment below if you'd like to be assigned to work on this. Please do not open a PR unless you have been assigned by a maintainer.

[ghost]

I would like to be assigned this :D

[mao-sz]

All yours

[mao-sz]

Assignee account was deleted - reopening for assignment. Please see https://github.com/TheOdinProject/curriculum/issues/30187#issuecomment-3567086951 for acceptance criteria.

[ZackHoang]

I'll take this!