css pollution issues about testable-projects-fcc

[no-stack-dub-sack]

@QuincyLarson Are you referring to the note to campers that I included a screenshot of above? That note will not appear in the PR as it is a comment left directly in the codepen boilerplate (the only effective place to leave it and guarantee that campers see it). It is included in the boilerplate found here: http://codepen.io/freeCodeCamp/pen/MJjpwO

If this is what you meant, I think you can go ahead and close this again. However, our approach still isn't perfect, so we can always leave it open to see if any other campers come along with and ideas down the road!

[no-stack-dub-sack]

@QuincyLarson So I've taken a look, and I think with the fix made from issue #22, the one about the input[type="checkbox"], there are no other rules from the test suite's CSS that will pollute a projects CSS, however, enforcing the reverse is quite the challenge.

If a user adds global styles to their projects using the * selector or something like:

body {
    color: red; /* will affect text in foldaway menu  */
  h2 {
     border-bottom: 2px solid black; /* will affect test cases in mocha div */
  }
}

or:

body span {
    margin: 100px; /* will affect items in the foldaway menu */
}

Any rules like these have the potential to affect the test suites styling. Was discussing this with @Weezlo at some point, and we were not sure of a good way to prevent this, aside from adding a warning in the boilerplate pen:

[QuincyLarson]

@no-stack-dub-sack one thing you could do is set all the CSS properties specific to your test result box to !important which would make them harder to accidentally override.

[no-stack-dub-sack]

@QuincyLarson I've already done this for most elements in the project, however, the bigger problem is properties that we are not setting rules for at all. In order to prevent those from being overridden, I believe we'd have define every single property as its default and then use !important, which is obviously not practical or maintainable... so still kind of at a loss on this one.

Also, the CSS for the elements in the test results div - the one that actually shows the individual user stories and whether or not they've passed or failed - this is controlled by Mocha's CSS, which uses specificity, rather than classes in most cases, to set the styles. I suppose I could go in and modify Mocha's CSS, but again, the most common properties that are being overridden here, are properties that are not set at all in Mocha's CSS (such as border, color, etc.).

EDIT: I've added !important to several other elements to be a bit safer, but will still not account for the * selector or for properties we have not set

[QuincyLarson]

@no-stack-dub-sack it sounds like we've covered MOST of the bases, and can let this go. As long as we have some basic text, like the text you proposed, that notifies campers that their CSS can break the tests, I think we're OK. At the end of the day, there's only so much we can do to prevent them from doing these things.

[QuincyLarson]

@no-stack-dub-sack I checked your PR and it didn't have your note about global style rules so I reopened this issue. To be 100% clear, I agree that a note about global styles is good and we should have one. Your verbiage above is sound. Once you've added it, I think we can close this issue.

[QuincyLarson]

@no-stack-dub-sack OK - thanks for pointing this out. Yes - I'm glad campers will see that comment right in the boilerplate.