[UI Framework] [ K7] Fix code block font-family and annotate reset

[cjcenizal]

No description provided.

[cjcenizal]

@snide Here's a good example of one of the benefits of following the style guide's commenting recommendation. The comment applies to multiple properties, and we can use the citation number to communicate that.

[snide]

I find it hard to read. You have to scan multiple lines to see the comment. I don't see this style anywhere in larger frameworks. They all use single line comments either above or next to the properties in use.

I don't see much use in adding a key for CSS blocks. At most you're looking at under 10 defined properties. Rather just see it in use against the content where it's being defined.

It's a small place where I think their recommendation is off.

[cjcenizal]

Yep, I hear you. What's your solution for where a comment applies to multiple lines? And for where multiple comments apply to a single line?

[snide]

For two, where you have a long block of text I'd just separate it out.

.cssThing {
  color: white;
  background: blue;
  // Zoom and outline are set to reset Internet Explorer
  // and Firefox. Blah blah, long comment spans multiple lines.
  zoom: 1;
  outline: none;
}

For 90% of comments though, the explanation is pretty short and on one item. I can be swayed here if you want it uniform and above. I just find this works most of the time.

.cssThing {
  color: blue;
  background: red;
  zoom: 1; // Fix for IE 11.
}

The other benefit is this means that comments above the selector mean they are actually commenting the selector itself.

// This is used when the popover does this weird thing.
.cssThing--modifier {
}