CSS
These are the CSS-specific coding styles. Anything mentions here overrides/adds to the "In General" guides. The only 1 principle when coding CSS is that:
- Be consistent. As long as it is sharing a single pattern, it is maintainable.
#1- For Any Link, State Protocol
#1- For Any Link, State Protocol
- State the full URL including the protocol (e.g.
https
). - Avoid using insecure protocol.
/* Recommended */
@import 'https://fonts.googleapis.com/css?family=Open+Sans';
/* Not recommended: omits the protocol */
@import '//fonts.googleapis.com/css?family=Open+Sans';
/* Not recommended: uses HTTP */
@import 'http://fonts.googleapis.com/css?family=Open+Sans';
Rationale
Rationale
- Security purposes.
#2 - Indentation
#2 - Indentation
- use 2 spaces tab.
Recommended:
.example {
color: blue;
}
Rationale
Rationale
- Use tab as it is designed for indentation.
- Make the elements clear.
- These spaces are deleted when minification process is used.
#3 - Naming Convention
#3 - Naming Convention
- Use lowercase at all cost (except for values like full name).
<!-- Recommended -->
color: #e5e5e5;
<!-- Not recommended -->
color: #E5E5E5;
Rationale
Rationale
- Distinguish between tags, its descriptions and values.
- Less complications.
#4 - Comments
#4 - Comments
- Use minification and compression for post-processing CSS output.
- Follow Generalized practice when you use minification compression for your CSS output.
- Use sparingly otherwise.
Rationale
Rationale
- Minification process will strip the comments from the output CSS. Hence, it is safe to use comments.
- Minify CSS reduces network payload size.
#5 - Use HTML5
#5 - Use HTML5
- Use HTML5 instead of other version.
- Use UTF-8 characters set.
- Use tools like W3C Validator to validate site.
Recommended:
<!DOCTYPE html>
<meta charset="utf-8">
Not recommended:
<html>
<meta charset="utf-8">
Rationale
Rationale
- Security and modern browsers interpretation.
#6 - Use Proper ID and Class Naming
#6 - Use Proper ID and Class Naming
- Use meaningful name.
- Use generic name over presentation or meaningless name.
- Use functional and generic name to simplify styling changes.
Recommended:
<!-- Recommended -->
#gallery {}
#login {}
.video {}
.aux {}
.alt {}
Not recommended:
<!-- Not recommended -->
#yee-1901 {}
.button-green {}
.clear {}
Rationale
Rationale
- Built-in syntax checkup.
- Purposeful checking and simpler codes.
#7 - ID and Class Naming Style
#7 - ID and Class Naming Style
- Should be as short as possible but as long as necessary.
- Should be intuitively acceptable by its name.
Recommended:
#nav {}
.author {}
Not Recommended:
#navigation {}
.atr {}
Rationale
Rationale
- Keep things simple.
#8 - Avoid Type Selector Whenever Possible
#8 - Avoid Type Selector Whenever Possible
- Use generic ID and class type selector.
- Only use selector when absolute necessary.
Recommended:
#example {}
.error {}
Not recommended:
ul#example {}
div.error {}
Rationale
Rationale
- Selector bloats CSS file for 1 specific styling.
- Performance degradation.
#9 - Use Shorthand Whenever Available
#9 - Use Shorthand Whenever Available
- Use the simplest configuration for maximum profits.
Recommended:
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
Not recommended:
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
Rationale
Rationale
- Less line and clean.
#10 - Only Provide Unit When Required
#10 - Only Provide Unit When Required
- Not all elements need unit. Provide to those that are needed.
Example:
flex: 0px; /* This flex-basis component requires a unit. */
flex: 1 1 0px; /* Not ambiguous without the unit, but needed in IE11. */
margin: 0;
padding: 0;
Rationale
Rationale
- Complying to standards.
#11 - Omit Leading 0.
#11 - Omit Leading 0.
- Remove the leading 0 when it comes to decimal values.
Recommended:
font-size: .8em;
Not recommended:
font-size: 0.8em;
Rationale
Rationale
- Clearer decimal value.
- reduce overall sizes.
#12 - Use 3 Hexadecimal Characters When Available
#12 - Use 3 Hexadecimal Characters When Available
- When there are repeating values compatible with 3-hexadecimal characters, use it.
Recommended:
color: #ebc;
Not recommended:
color: #eebbcc;
Rationale
Rationale
- Reduce overall sizes.
#13 - Use Prefixes to Group CSS Elements and Perform Delimiting
#13 - Use Prefixes to Group CSS Elements and Perform Delimiting
- Use hyphen to prefix elements.
- Use hyphen to separate words instead of space or underscore.
Recommended:
.adw-help {} /* AdWords */
#maia-note {} /* Maia */
#video-id {}
.ads-sample {}
Not recommended:
/* Not recommended: does not separate the words “demo” and “image” */
.demoimage {}
/* Not recommended: uses underscore instead of hyphen */
.error_status {}
Rationale
Rationale
- There are times where we combine multiple CSS files together and generic names tends to conflict one another. You can use prefix to group them together as one module library.
#14 - Sort Alphabetically for Each Declaration
#14 - Sort Alphabetically for Each Declaration
- Use hyphen to prefix elements.
- Group vendor-specific elements with the main elements but also, sort them alphabetically in the group itself.
Recommended:
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;
Rationale
Rationale
- Easier to search for elements.
#15 - Block Content Indentation
#15 - Block Content Indentation
- Indent all elements inside block contents
Recommended:
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
Rationale
Rationale
- Clear grouping of styles.
#16 - Always use Semicolon to End A Declaration
#16 - Always use Semicolon to End A Declaration
- Always use semicolon to split declaration.
Recommended:
.test {
display: block;
height: 100px;
}
Not Recommended:
.test {
display: block;
height: 100px
}
Rationale
Rationale
- Clear instruction splitting.
- Extensibility and Maintainability.
- Minification process will remove all spaces. Hence, semicolon acts as a vital separator.
#17 - Use a Space After Property Colon and Before Opening Curly Braces
#17 - Use a Space After Property Colon and Before Opening Curly Braces
- Add a space after a colon.
- Add a space before opening braces.
- DO NOT set opening curly braces onto a new line.
Recommended:
.test {
display: block;
height: 100px;
}
Not Recommended:
/* Not recommended: key-value are joined */
.test {
display:block;
height:100px
}
/* Not recommended: missing space before curly braces */
#video{
margin-top: 1em;
}
/* Not recommended: unnecessary line break for curly braces */
#video
{
margin-top: 1em;
}
Rationale
Rationale
- Clear key-value splitting.
#18 - Use Comma and New Line To Separate Multiple Selectors
#18 - Use Comma and New Line To Separate Multiple Selectors
- Always use comma and new line to separate selectors.
Recommended:
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
Not Recommended:
h1, h2, h3 {
font-weight: normal;
line-height: 1.2;
}
Rationale
Rationale
- Clear selector modifications.
- Minification process will remove the space and new-line. Hence, write for human to read.
#19 - Always Put a Blank Line between Rules
#19 - Always Put a Blank Line between Rules
- Use blank new line between rules.
Recommended:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
Not Recommended:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
Rationale
Rationale
- Clear separation.
- Minification process will remove the space and new-line. Hence, write for human to read.
#20 - Use Single Quotation Marks Whenever Possible
#20 - Use Single Quotation Marks Whenever Possible
- Default to single quotation mark (
'
). - No quotation mark for URL.
- Only use double quotation mark (
"
) when there is a strict requirement.
Recommended:
/* Recommended */
@import url(https://www.google.com/css/maia.css);
html {
font-family: 'open sans', arial, sans-serif;
}
Not Recommended:
/* Not recommended */
@import url("https://www.google.com/css/maia.css");
html {
font-family: "open sans", arial, sans-serif;
}
Rationale
Rationale
- Security reason (opinionated).
- Comply to standards.
#21 - Refrain from Using !Important
#21 - Refrain from Using !Important
- That is for emergency and debugging usage.
- Refractor your CSS instead.
Rationale
Rationale
- If everything is explicitly important, they are not important at all!
That's all for CSS coding style.