Creating freeCodeCamp's CSS Style guide

I would like to propose freeCodeCamp’s CSS Style guide to improve overall maintainability of the codebase. As the FreeCodeCamp has a lot of contributors, and everyone writes the CSS in a different way. And it is hard to keep of track of different ways of writing CSS.

Initial Recommendations:

Comments

• Add comments, when you are starting a new LESS file, so the developers know what are they working with, also add comments when you start new section which is related the code block, it helps with the readability, see EXAMPLES below (I have encountered these style of comments across the code base, therefore I would like to continue writing it, instead of proposing a new style)

• Example 1 - when starting a new LESS file:

//
// Navigation
// --------------------

• Example 2 - when adding a section, related to navigation

//
// Navigation - Mobile Styles
// ------------------------------

Spacings

• Add spaces after a property, it will be much easier to read such a codebase, and maintain. See EXAMPLES below.

• Example 1 - Correct Way

p {
  color: #fff;
}

• Example 2 - Incorrect Way
• What is wrong? No space after a colon

p {
  color:#fff;
}

Colors

• Prefer lowercase, instead of uppercase. Now across the CSS, contributors are mixing both. Lower case is faster to write, easier to read. Again improves overall maintainability, if the CSS has consistent convention. Also if possible shorten the hex value. See EXAMPLES below.

• Example 1 - Correct Way

p {
  color: #fff;
}

• Example 2 - Incorrect Way
• What is wrong? upper-cased hex value, not shortened

p {
  color: #FFFFFF;
}

RGBA or RGB colors

• Add spaces after values, improves readability. See EXAMPLES below:

• EXAMPLE 1 - Correct Way

p {
  color: rgba(123, 123, 0, 0.1);
}

• EXAMPLE 2 - Incorrect Way
• What is wrong? No spaces after values

p {
  color: rgba(123,123,0,0.1);
}

##No unit when declaring 0

• In property such as box-shadow, if you set a 0 value, then you should avoid adding the unit. See EXAMPLE below.

• EXAMPLE 1 - Correct Way

p {
  box-shadow: 1px 1px 0 rgb(0, 0, 0);
}

• EXAMPLE 2 - Incorrect Way
• What is wrong? Units after 0

p {
  box-shadow: 1px 1px 0px rgb(0, 0, 0);
}

Avoid floating numbers

• If possible you should avoid floating numbers in CSS for different sizing, as it could render a bit differently. See link attached below.

Browser Rounding

[vkWeb]

@raisedadead @tomasvn According to me the process of creating a CSS style guide and sticking to it will in long-term not yield useful results. React, Yarn, Babel and lots of other open source projects use Prettier and other similar extensions for their CSS Style formatting.

Instead of creating a style guide. We should tell our contributors to Install Prettier In their IDE/Code editor and we’ll be good to go. @raisedadead Thoughts on this?

[ojeytonwilliams]

I think prettier does a good job with formatting, so I’d rather keep that. If we use https://github.com/prettier/stylelint-prettier then prettier is used as a plugin of stylelint and we get the best of both worlds.

This mirrors the approach we already use for JavaScript linting.