Need example about inline CSS Coding Standards

[monzuralam]

​CSS Coding Standards

There is no example of inline CSS Coding Standards.

I think It'll be helpful for developers & Improve Documentation.

For example -

#incorrect
.selector-1{ color: green; }

#correct
.selector-1{
    color: green;
}

[milana_cap]

Hi @monzuralam, thank you for the suggestion.

In my opinion, there is no differentiation between inline CSS and in-file CSS, so all the rules already noted in the documentation equally apply to both. Also, if you noticed, there is one space between the selector and the opening curly brace in all examples.

As I said, this is just my opinion. I'll leave it to @jrf to make the final decision.

[jrf]

@monzuralam Thanks for bringing it up and thanks @milana_cap for looping me in.

I'm not sure that I understand correctly what you mean by "inline CSS" and agree with Milana that in principle there is no difference coding standards wise with "inline" (as in "embedded in a PHP or HTML file") or "in file" (as in "in a separate CSS file") CSS.

When I look at the above examples, I think you are talking about something else though.

I see two CSS examples with selectors which use higher specificity than the code samples in the existing docs and I agree that it might be good to add one or two higher specificity examples to the docs.

Having said that, both the above examples would in my opinion be invalid/incorrect for the current coding standards for the following reasons:

• Higher specificity is still just a single selector.
• Spacing around the open brace is incorrect (as Milana also pointed out).

So, based on my reading of the current standards, the correct example should be like this:

#correct .selector-1 {
    color: green;
}

On a practical note, the coding standards docs have their own repo and PRs can be submitted there if this would be something to patch: ​https://github.com/WordPress/wpcs-docs

[coffee2code]

The OP may have meant for "in-line" to mean "on-one-line". So they may have been suggesting that the CSS standards should comment on styles being defined on the same line as the selector (and either explicitly state that it is not recommended, or if ok then under what conditions, since it gets hard to read with more than one style rule).

I've slightly reformatted their example to clarify this:

/* This formatting is incorrect. */
.selector-1 { color: green; }

/* This formatting is correct (selector is not on same line as style rule) */
.selector-1 {
    color: green;
}

Seems reasonable to me that the CSS coding standards should comment on this formatting if it doesn't.

However, I'm closing this as 'invalid' here since, as jrf pointed out, it would be better served being brought up on the coding standards GitHub report at ​https://github.com/WordPress/wpcs-docs.