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