CSS Code Style

[fredck]

Just like the JavaScript Code Style guidelines, we should have something for CSS.

[fredck]

My opinion:

• Prefix: to avoid collision with other systems, all CKEditor related CSS classes must be prefixed with cke-.
• Skins: we don't have to support more than one in the same page, so no skin name prefixing is necessary.

As for code style:

• Class names: all lowercase with dash-separators. E.g. cke-editable-something
• Id: the same as class names: E.g. cke-editor1
• Indentation follows the js guidelines.
• Braces follow the js guidelines.
• Brackets and parenthesis have spaces inside. // unsure
• Single quote for strings. // to check if allowed
• Colons: no space before, space after (like js)
• Semi-colons: no space (like js)
• Blank line between rule sets.

Example:

/* Comment about the following. */
.cke-editor1 cke-toolbar-list[ data-pos = 'even' ]:nth-child( 2 ) {
    color: red;
    text-align: center;  /* Some comment. */
}

.cke-something-else {
    color: blue;
}

[Reinmar]

I don't think that it's common to insert so much spaces in these places: [ data-pos = 'even' ]:nth-child( 2 ). This is how we format JS, so I understand the idea, but if I'm right that it's not common (I wasn't writing any serious CSS in years :D), then I guess it does not make sense to be so special here.

As for the rest - I agree.

[adelura]

There was an note (for file name standards) which says if there is a widely adopted approach - let's stick to it. As @Reinmar said, I'm also againt reorganizing CSS style.

[oleq]

We should rather think about Less/Sass code style and structure than to dwell upon CSS (#26). If we decide to go with CSS pre-processors it is the only thing that matters. Also, since Less/Sass are programming languages, it's not that straightforward. I'll create some proposal if #26 is resolved and you feel it's right.

[Reinmar]

We don't have SASS validation. If you'd like to introduce it, @oleq, feel free to open a ticket in ckeditor5.