Freecodecamp: Semicolon missing in example code

[MontanaWebmaster-Nora]

Challenge Name

https://www.freecodecamp.com/challenges/change-the-color-of-text

Issue Description

Example code does not have a semicolon at the end of the rule. This could encourage bad habits.

<h2 style="color: blue">CatPhotoApp</h2>

[BKinahan]

I can't find any source for including a semi-colon after the final rule in a style attribute, but if you have one please share it.

For example, it is omitted in the HTML5 specification.

[MontanaWebmaster-Nora]

I find it very interesting that it's not part of the specification. Thank you for bringing that up. I'm not sure whether my resources are more authoritative that that, but the are listed below. My own experience matches the comments from the other developers - if you leave out that semicolon, it can cause a process error in that other developers (or even the original author) might not catch the missing semicolon when additional work is done. I have, in fact, caused my self a lot of grief with this omission.

http://stackoverflow.com/questions/11939595/leaving-out-the-last-semicolon-of-a-css-block
http://stackoverflow.com/questions/11062615/will-css-3-still-allow-omitting-final-semicolons

Maybe the specific issue here is whether the ; is a separator or a terminator.

[ghost]

It might be worth adding a semicolon to make sure our campers don't fall into that mistake with multiple styles in the future?
cc/ @FreeCodeCamp/Issue-Moderators

[BKinahan]

Both of those discussions are about CSS within declaration blocks (curly braces, {}, what you would find between <style> tags or in a .css stylesheet file), rather than the HTML style attribute. It is a different situation.

Which of these are you referring to when you mention experience with causing process errors?

[MontanaWebmaster-Nora]

@BKinahan I would have to say, "Both." An inline style can also have many rules. In order for each rule to be resolved separately from the next, it needs a semicolon. The same process problem applies. A harried developer, a new developer or (I hate to admit it) but a moment of carelessness could cause the next developer to not add the semicolon to a previous person's code before adding yet another rule.

I understand that this is a learning environment, and the inline styles only carry through two challenges, but might not a student apply the ideas learned in the inline styles to the internal styles and then on to external styles?

I say this from experience. In the old days (1997) we often didn't close <p> because it worked just fine without it. Not a good long term process for sure!

[anunos]

I click on "Run tests" and nothing happens, with or without the semicolon.

[MontanaWebmaster-Nora]

@anunos Have you tried the Free Code Camp chat? There is a Help chat. https://gitter.im/orgs/FreeCodeCamp/rooms

[erictleung]

@MontanaWebmaster-Nora my two cents on the matter is that you should use classes when possible. As it is pointed out, FCC is a learning environment and so here we wanted to teach about how to style elements using inline style elements. But in the future and in production systems, you might go with classes rather than inline style elements because of extensibility and portability.

Here's a discussion on using inline style versus classes that goes along with my thoughts.

So all in all, I don't feel there should be a semi-colon at the end of the example inline styling.

If we were talking about CSS rule declarations rules as @BKinahan has brought up, then I would always have trailing semi-colons even for one style in a class.

[matty22]

As someone who used FCC and other online tutorials to learn HTML and CSS and currently works in email design, that missing semicolon would cause ALL KINDS of issues that are especially hard to debug because every HTML element in an email contains inline-styles, so good luck finding where you left out that semi-colon.

More generally, if I were writing this out as I might in a stylesheet, wouldn't you typically include a semi-colon after each style regardless of whether there was one or more styles?:

<style>
  p {
    font-size: 16px;
  }
</style>

Why wouldn't you do the same for inline-styles?

[MontanaWebmaster-Nora]

Email is something I was not thinking of at all. That is a great addition to this discussion.

But, I did want to add the factor of CMS, whether WordPress, Drupal, Joomla or whatever, I have a number of clients who have come to me with very messy combinations of themes and plugins. Many of them have already blown their budget on the lousy development, so I have to tread carefully. One plugin author I contacted even told me to override everything with !important, which is my very last choice in options. But, I do occasionally have to throw in an inline style (2nd to last choice) to overcome a multitude of internal styles, and style sheets from all directions.

In any case, why should you have to add a semicolon to someone else's line of code?

[systimotic]

It seems like the example technically isn't wrong. I would vouch to update it and add a semicolon. It could help prevent confusion and mistakes. It adds value, and doesn't take any away. Seems like a good idea to me!

[caravinci]

Though I agree on it being a good habit (one I apply myself without exception), since we're making an exception to the unspoken rule of 'not doing inline styling unless absolutely necessary' for the sake of simplicity in learning, we should also not add seemingly complex concepts like ending a phrase with a semicolon. It is obvious to us because we know it's a good idea, but a beginner wouldn't know what that is for or why this new language requires it at all.

At that stage of the curriculum (first example of styling in the whole map) it is an unnecessary element, which could add daunting syntax complexity to absolute beginners, and would possibly require an explanation as to why there's some seemingly random punctuation mark right before closing a set of quotes. This explanation would lengthen the instructions and increase the already steep learning curve far too early in the process.

Again, I do not ever write my styles without those pretty semicolons (I like them, visually), but for the sake of ease in onboarding: My vote, no. This challenge is fine as is.

[RobertDiebels]

I inadvertently created the issue that recently got closed. So I decided to join the discussion on here.
I've read all the comments and some good points are made. Especially the HTML spec not requiring it (did not know that).

There are some points I do not agree with however. For example the ending of the line with a semicolon being a hard concept the grasp.
Everyone knows you end your sentences with a "." the same thing applies to a bit of styling. You mention a property and a value separated with a ":" and end with a semicolon.

It's just like most grammar that exists today. You end your sentences with some special token so someone else knows you're done. In this case someone else being the browser (though apparently it doesn't need to know that). So people that know how to read will have a similar concept to associate the semicolon with.

Aside from that I think it is a bad habit to teach people something which will cause trouble later on just because they might not grasp it at that time.
You don't even have to go into it at that point. Just say, this is the way we will do it for now. Why we do it this way will be explained later on.

You don't need to explain every little thing in my opinion. Either way, I think you would be facing the choice between.

• Ease of learning.
• Teaching bad habits.

My vote would always got with "Not teaching anyone bad habits". If the spec is fine with either, and you don't want to teach anyone bad habits nor want to lose ease of learning. Then at one point you're going to get into trouble with your curriculum.

I might be exaggerating here but the amount of damage and wasted time, bad habits in coding or anywhere else cause, is stupendous. Especially if people aren't using a fully-fledged IDE, which will catch stuff like this for you.

One of the first things you teach even states that "coding is hard". It's only going to get harder if you don't teach someone the right habits early on. And like I said they don't need to know why. Just let them accept that it's there.

Who knows, they might even figure out that it also works without the semicolon. Which increases their learning from experience. Because it will probably raise questions, which are the ultimate learning tool.

So I would go with a change, because you want to avoid teaching bad habits at all costs. Even if the spec allows for the bad habit to exist.

[raisedadead]

So I would go with a change, because you want to avoid teaching bad habits at all costs. Even if the spec allows for the bad habit to exist.

Yes agreed. But, teaching best practices are not within the scope of the code challenges (we are limiting then to teach concepts only). This keeps things simple.

Best practices have a better impact when taught via wiki articles in our forum and even better via the video challenges and our youtube series.

Please feel free to check those.

[systimotic]

@raisedadead How do you suggest we handle this issue?
When you teach people to write, you don't start with punctuation. I can see how it makes sense to leave out the semicolon for this challenge.

[dhcodes]

In the past, we've used tests to enforce the semicolon on a single style. I think that thinking applies here and we should add the semicolon.

[QuincyLarson]

I agree with @dhcodes that we should add the semicolon. We should also add a single sentence like "Note the semicolon ; which is used at the end of a style declaration."

We should add a new test that checks specifically for the semicolon that says "Be sure to add a semicolon ; to your style declaration."

[shubhshrma]

I would like to work on this.
@QuincyLarson Should I add all the three things you've mentioned?

[erictleung]

@shubheksha yes, the three things that should be added are:

1. Add semicolon to example code in challenge description
2. Add a note about adding semicolons (search around other challenges in the source code to see how to add notes in the right format)
3. Add test to check for semicolon

Please first read the contributing guidelines before taking care of this issue. And feel free to visit the Contributors Help chat room if you have any questions about helping. We're there to help.

[raisedadead]

@shubhshrma : Eric wanted to mention you! Good luck and happy fixing!

[shubhshrma]

Please note that http://beta.freecodecamp.com/en/challenges/basic-css/change-the-color-of-text already has a ; but no note or specific test.Should I add these two here or all three at backup/master

[erictleung]

@shubhshrma committing to backup/master shouldn't be necessary for this challenge. We're only adding changes to the backup (i.e. production) if this is critical change to the curriculum or site, which it isn't. So I'd still just add your changes to staging. And I would just add the missing challenge tests if the semi-colon has already been added to the example :+1:

[shubhshrma]

Thanks @erictleung , that explains a lot about backup/master to me. :+1:

[Masd925]

CSS specification https://www.w3.org/TR/css-syntax-3/ Chapter 2. Description of CSS’s Syntax says:
Each declaration has a name, followed by a colon and the declaration value. Declarations are separated by semicolons.

CSS style attribute specification https://www.w3.org/TR/css-style-attr/ Chapter 1. Introduction shows the syntax of using a style attribute. The example has two style declarations inside the style attribute, and only semicolon is between the two declarations.

My thoughts:

Some examples on the first document (css-syntax) have semicolon at the end and some don't.
The example on the second document (style-attribute) doesn't have a semicolon at the end.

It seems that according to the specifications, semicolons are used between the style declarations and not at the end.

The claim that one should use a semicolon at the end of style attribute value is false claim, because it is not supported by the specifications.
Whether one could use such a semicolon at the end and do no harm, and whether that would help when adding more styles is another thing.