Rule: font and font-family declarations should always end with sans-serif, serif, or monospace

[mahonnaise]

People often forget to add a generic font if they are using web fonts.

Typos can happen as well. E.g. letters are switched around or - what I just saw a few hours ago - the dash in "sans-serif" is sometimes forgotten.

cursive isn't allowed, because this often means Comic Sans. fantasy was also kicked, because it's either garbage or the browser ignores it and pretends it's the same as sans-serif. Only sans-serif, serif, and monospace are safe options.

[nzakas]

I'm not sure about this one. I use the YUI fonts stylesheet, for which I only need to specify a single font name in my own CSS and otherwise falls back to what's in the YUI stylesheet. It seems like there would be a lot of exceptions to this rule ( any time funds are specified in multiple places).

[mahonnaise]

It doesn't seem to work that way: http://i.imgur.com/8TLBd.png

(Cross browser, anyhow.)

http://www.w3.org/TR/CSS21/fonts.html#propdef-font-family

Style sheet designers are encouraged to offer a generic font family as a last alternative.

That's how I learned it and that's how I always did it. There has to be a generic font at the very end. No exceptions.

This rule was written to enforce this particular part of our CSS conventions. I shared it because it appeared to be fairly generic. The motivation (well, the reminder) came from Tab Atkins' blog. He (of all people! :)) had a small typo in his CSS. So, yes, I do believe this is a useful rule.

Well, there is no need to hurry. We can wait for Nicole's opinion.

[nzakas]

I'll ping Nicole when she gets back and leave this open until then.

[stubbornella]

I think @mahonnaise is right here. The base property in the YUI stylesheet would be overwritten by your rule, so the fallbacks do not exist to the browser. There is no cascade of comma separated values. I think we should merge this.

[nzakas]

@mahonnaise Can you write up some documentation for this rule in the wiki? Add it to the list here: https://github.com/stubbornella/csslint/wiki/Rules, and just put (coming in v0.9.9) next to it. You can copy the template from one of the other rules. Once that's done, comment here and I'll merge in the changes.

[stubbornella]

This rule is really useful, I'd love to see it get documented.

[philipwalton]

This rule doesn't apply in all situations.

I agree that it's a good rule to add, but an exception needs to be made for pseudo-elements (::before, ::after, ::first-line, ::first-letter), as unknown fonts in their font-family declarations actually do fall back to their parent element.

Here's an example illustrating what I mean:
http://jsfiddle.net/v6T9b/

This is especially true for icon fonts who typically define a single font family using the ::before pseudo-element. For example:

.icon::before {
  ...
  font-family: MyIconFont;
  ...
}

[frvge]

Surpassed by #334. I think it makes more sense to focus efforts on that PR. Closing this one. Thanks for the effort.