bevacqua / css Goto Github PK

Under the section entitled "Styles", I believe you were trying to point out how to avoid the use of !important, which is reasonable. however, I think using "btn-red" as a style name under a subheading of "Good" may also give the impression that the class name is a good one.

It is preferable to describe the semantic meaning of the button is red (warning? error?) rather than the color, so it can be later altered by the designer (can we make it orange?) without causing a semantic disconect

these 2 are the vital things in css and adding them will help

You state one should shy away from "these", meaning the examples below the statement. The examples consist of three items, two of which you state are okay in certain conditions. This contradicts the previous suggestion.

This should be restructured to say avoid frameworks (you should say why as well) and that the other two are separated away to explain why they are okay in certain conditions.

You mention twice "Keep z-index levels in variables in a single file". Could you clarify with an example? I don't understand what this rule is trying to say.

Thanks for the detailed guidelines.

The subheadings need to be smaller than the parent heading so they display as subheadings. Actually, skip this, I now see it isn't necessary.

Under the "Not Stylus" subheading, "Use a single space after the colon" and "Put spaces after : in property declarations" are fundamentally the same thing. Also, the first example under "bad" has #foo instead of #f00;. Letters versus numbers in other words.

Under the "CSS" subheading, the examples in the list use .foo and .bar as classes. In the "Good" and "Bad" examples foo is used in a comment while classes are .bar and .baz. I would suggest using .foo and .bar as classes and display the comment using the word comment instead.

You state under Selectors and Nesting that styles, should be "selectors" actually, shouldn't need to be nested more than three times, four at worst. But then your "bad" examples consist of three selectors, which actually follows the stated suggestion.

In fact, I would even say that your bad examples are actually consisting of two levels of nested selectors as the first shouldn't be counted since it isn't technically nested.

To follow the the example given, the suggestion would be selectors shouldn't be nested more than one level deep. I would suggest making it no more than two levels deep and update the example accordingly. For example, showing up to three total selectors as okay and four total selectors going too far.

@bevacqua,

I like your style guide, it aligns closely to my personal preferences (except the two-space soft tabs, I prefer four space soft tabs). I do have one point I'd like to raise.

I strongly feel that font-size should be in layout, because:

• When doing responsive design, we use ems to specify break points, font-sizes, paddings, margins etc etc. The reason is that this solves a lot of issues with phablets and other devices in the Android Resolution Race (arr). See also: Gardner, 2012
• As a result, changing font size on a root element of a namespace (e.g. the .ns-container or even body will affect sizing ánd positioning of elements)
• Personally, it feels counter-intuitive to not have font-size near color, font-weight and other stylistic properties, but I felt I needed to raise this point since you have made the distinction purely on layout vs. presentation.

What are your thoughts on this?