Talk:CSS Coding Style

Removed "unless it is the last rule in the list of CSS mark-up."

https://docs.moodle.org/dev/index.php?title=CSS_coding_style&diff=42786&oldid=42785

I don't think this made any sense. Possibly someone was getting colons and semi-colons mixed up? You always need the colon, and while you **can** leave the semi-colon off the last one, and it's a common minification technique, that's something the CSS minifier should take care of automatically (note to myself, should really check the Moodle minifier does this, but I think it does). Otherwise it introduces noise into the diffs since you need to change two lines if you add or remove the line at the end and gives the person writing the CSS a weird, subtle manual rule to be aware of. (In PHP we recommend the opposite and add a comma at the end of arrays even though it's not necessary.)

Leave one line between blocks

https://docs.moodle.org/dev/index.php?title=CSS_coding_style&diff=42785&oldid=42784

Changed this from recommending no empty line between CSS blocks, except for signalling sections to a standard one line between all blocks. The old rule is hard to enforce or check automatically since the tool won't know about what is and isn't a section.

I also checked the Wordpress CSS guides that this was based on and they (at least currently) say "Add two blank lines between sections and one blank line between blocks in a section." which seems a bit more reasonable (I think one line is fairly standard) but still suffers from not being able to run a formatter or linter over the file without losing info. If people want to have section breaks they should use comments, which are covered later in the doc.

A few questions

A few questions about these style guidelines, as they seem a bit outdated:

1. Do we need to restrict color settings to only HEX? This probably made sense when there was only HEX & RGB, but we now have really cool stuff like HSLA which is supported in all the browsers we support except IE8. It's also very easy to provide fallback to HEX:

 .selector {
   background-color: #hex;
   background-color: hsla(170, 50%, 45%, 1);
 }

1. For many properties, browser prefixes are no longer needed for our supported browsers. Shouldn't we be recommending that browser prefixes be added for supported browsers which need them, only? (Also, to make sure there is a background-color fallback for things like gradients?)
2. What about !important being a bad thing? If you can't override existing rules without !important, that indicates that existing selectors are too aggressive (usually using IDs rather than classes and elements).
3. How about we recommend OOCSS and where you can't use it request classes added to Moodle's markup so you can?