General HTML, CSS & SASS Guidelines.
- Use soft tabs with two (2) spaces.
- Always use double quotes for attributes.
- Never omit optional closing tags (eg.
</li>,</body>, etc.)
-
Always start with
<!DOCTYPE html> -
Include language attribute into your html tag, like:
<html lang="en-us"> <!-- ... --> </html>
-
Use IE compatibility mode, like:
<meta http-equiv=“X-UA-Compatible” content=“IE=Edge”>
-
Always assign charset into your meta, like:
<meta charset=“UTF-8”>
-
Use viewport meta information for supporting responsiveness to your template, eg:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
-
CSS & JS includes doesn’t need
text/cssortext/javascriptbecause they are respective defaults. -
Attribute Ordering - should be in a particular order for ease of reading of code:
id,name,class,data-*,src,for,type,href,value,title,alt,role,aria-*
-
Use
id's in camelCase & classes in dash format. Like:<div id="myId" class="my-class"></div>
-
Always use classes instead of
id's wherever possible, other than modal-triggering, etc. -
Boolean Attributes - Do not add values to boolean attributes such as
checked,disabled, etc. (not its value) as its presence of boolean attribute represents its true value & the absence represents its false value. -
Reduce markup wherever possible.
-
Use javascript markups as low as possible.
General structure of your HTML should look like:
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta http-equiv=“X-UA-Compatible” content=“IE=Edge”>
<meta charset=“UTF-8”>
<title>Page title</title>
</head>
<body>
<img id="companyLogo" src="images/company-logo.png" alt="Company">
<h1 class="hello-world">Hello, world!</h1>
</body>
</html>- Use soft tabs with two (2) spaces.
- When grouping selectors keep individual selectors to a single line, like:
- Include one space before the opening brace
{of the declaration block, Like: - Place closing braces
}of declaration blocks in new line. - Use one space after each colon
:for each declaration. - Each declaration should appear in its own line.
- End all declarations with a semi-colon
;, whether its the last declaration. Same follows for inline HTML styling as well. - Comma-separated property values should include space (
,. For ex:color: rgba(0, 0, 0, 0.2); - Use either all-caps or all-smalls hex values all over the project.
- Use shorthand hex values wherever possible. For ex: color:
#fff; - Use quotes in values of quote attributes, such as use
input[type=“text”]instead ofinput[type=text]. - Avoid specifying units in for zero (0) values, such as use
margin: 0;instead ofmargin: 0px;
This covers all the above points.
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}-
Declaration Order: Positioning, Box Model, Typography, Visual, Misc. Example:
.declaration-order { /* Positioning */ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 100; /* Box-model */ display: block; float: right; width: 100px; height: 100px; /* Typography */ font: normal 13px "Helvetica Neue", sans-serif; line-height: 1.5; color: #333; text-align: center; /* Visual */ background-color: #f5f5f5; border: 1px solid #e5e5e5; border-radius: 3px; /* Misc */ opacity: 1; }
-
Try not use
@importwherever possible. Instead use multiple<link>elements. (Can be ignored in SASS/SCSS) -
Place media queries as close as their relevant rule-sets in case of CSS. In SASS use media queries inside the selector (just by inheriting it)
-
Prefixed properties should follow a pattern.
-
For single declarations use a single line. For ex:
.icon { background-position: 0 0; }.
-
Use shorthand notations whenever you need it. For example if you need to assign margins for more than 2 directions use shorthand. For ex:
.selector { margin: 0 10px 10px 0; // margin for top, right, bootm & left respectively }
-
Avoid unnecessary nesting in SASS/SCSS. Try not to nest your SASS/SCSS more than 3 levels (keep it as low as possible). Example:
.parent-selector { .child-one { .child-one-one { ... } // do not inherit more than 3 levels } .child-two { ... } }
-
Keep your class names small & use dashes (no underscores or camelCase). Also discussed in HTML.
-
Use descriptive class names. Try to keep them small wherever possible.
-
Prefix classes based on the closest parent. Ex:
modal--header-title { ... }
modal--header-subtitle { ... }- Use
.js-*class names to denote the behaviour, but do not use them inside your CSS/SASS. - These all applies to SASS/SCSS variable names as well.
- Use descriptive comments rather to just defining the class name itself. For example,
- Instead of using
/* Modal Header */ - Use
/* Wrapping element for modal-title & modal-close */
- Instead of using
- Use consistent commenting hierarchy.
- Do not use more than 80 columns per line.
- Always assign master comments for a big components/pages in different style and normal comments in different style. You can use
//comments in SASS, like:// ######################################## // // ## MODALS.SCSS ## // // ######################################## //
- Use Prepros for SASS/SCSS compilation to maintain consistency. Enable Autoprefixing & Sourcemapping by default.
- Define a proper structure of your SASS structure to start with. Have a look at SASS/SCSS Structuring.
- Don’t use more than 3 levels (keep it as low as possible) of nesting in your SASS/SCSS.
- Use ‘&’ wherever possible, such as
:hover,:after,:before, and many others. - Use SASS/SCSS functions such as
mix,darken,lightenfor blending colors while hovering, selecting etc. - Use empty lines whenever required.
- Use
!default&!globalwherever possible in variables.
sass/
|
|– base/
| |– _reset.scss # Reset/normalize
| |– _typography.scss # Typography rules
| ... # Etc…
|
|– helpers/
| |– _variables.scss # Sass Variables
| |– _functions.scss # Sass Functions
| |– _mixins.scss # Sass Mixins
| |– _helpers.scss # Class & placeholders helpers
| ... # Etc…
|
|– components/
| |– _buttons.scss # Buttons
| |– _carousel.scss # Carousel
| |– _cover.scss # Cover
| |– _dropdown.scss # Dropdown
| |– _navigation.scss # Navigation
| ... # Etc…
|
|– layout/
| |– _grid.scss # Grid system
| |– _header.scss # Header
| |– _footer.scss # Footer
| |– _sidebar.scss # Sidebar
| |– _forms.scss # Forms
| ... # Etc…
|
|– pages/
| |– _home.scss # Home specific styles
| |– _contact.scss # Contact specific styles
| ... # Etc…
|
|– themes/
| |– _theme.scss # Default theme
| |– _admin.scss # Admin theme
| ... # Etc…
|
|– vendors/
| |– _bootstrap.scss # Bootstrap
| |– _jquery-ui.scss # jQuery UI
| ... # Etc…
|
|
`– main.scss # primary Sass file