About the Author

Below are the set of guidelines for HTML, CSS and SASS followed at Neoito. This document will help you to develop flexible, durable, and sustainable HTML and CSS.
The author and maintainer of the guidelines is Daliya John, UI Engineer at Neoito . She is also a member of Google's Women Techmakers Trivandrum chapter since it's inception.

1. Introduction

In working on large or small projects with dozens of developers, it is important that all the developers are working in a unified way. So that we should have maintain our code easily and keep it more readable.

1.1 Importance of guidelines

By using guidelines we can keep our code more organized and structured, that is easier to build and easier to maintain.

1.2 HTML

HTML is a Markup Language for creating web pages and web applications. HTML elements are the building block of html pages.

1.2.1 Syntax

Always use double quotes on attributes. Also never forgot to close any opened tags.


<!DOCTYPE html>	
<html>
 <head>  
  <title>Page title</title>
 </head>
 <body>
  <img src="images/company-logo.png" alt="Company">
  <h1 class="hello-world">Hello, world!</h1>
 </body>
</html>

1.2.2 HTML doctype

Consistent rendering in every browser possible with this simple doctype at the beginning of every HTML page.It is an instruction to the web browser about what version of HTML the page is written in.


<!DOCTYPE html>
<html>
  <head>
  </head>
</html>

1.2.3 Language Attribute

The HTML element in the following example declares that the document’s language is English. 


<html lang="en-us">
	<!-- ... -->
</html>

1.2.4 Compatibility mode

IE compatibility mode: Internet Explorer supports the use of a document compatibility tag to specify what version of IE the page should be rendered as. Otherwise, it's most useful to instruct IE to use the latest supported mode with edge mode. 


<meta http-equiv="X-UA-Compatible" content="IE=Edge">

To ensure proper rendering and touch zooming, add the viewport meta tag to your .


<meta name="viewport" content="width=device-width, initial-scale=1">

1.2.3 80 characters wide

80 character wide columns are used for html code. 


/**
* I am a long-form comment. I describe, in detail, the CSS that follows.
* I am such a long comment that I easily break the 80 character limit,
* so I am broken across several lines.
*/

1.2.4 Indentation

Indentation is a coding techniques to make our html clear. Without using indentation it’s hard to figure out where the code starts and ends.
Use 2 tab space for indentation (4 space). 


<p> 
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
 incididunt ut labore et dolore magna aliqua. 
</p>

1.2.5 Meaningful Whitespace

As well as indentation, meaningful whitespace will help us to understand our code easily.
single empty line between new section. 


<div class="session1">
 <div></div>
</div>

<div class="session2">
 <div></div>
</div>

1.2.6 HTML Comments

Code is written and maintained by many developers. So that we should have to ensure your code is descriptive, well commented. Well comments will convey the purpose and all the developers can understand the code. 


<!-- service start -->
<div class="service">
 <h3>heading 1</h3>
</div>
<!-- service end -->

<!-- products start -->
<div class="products">
 <h3>heading 2</h3>
</div>
<!-- products end -->

1.2.7 Attributes Order

HTML attributes should come in this particular order for easier reading of code. Class, id, name, data-*, src, for, type, href, value, title, alt, role, aria-* Classes make for great reusable components, so they come first. Ids are more specific and should be used sparingly so they come second. 


<a class="..." id="..." data-toggle="modal" href="#">
 Example link
</a>
<input class="form-control" type="text">
<img  class=”..” src="..." alt="...">

1.2.8 HTML Codes

Symbol Character Name Example
Less Than < <
Greater Than > >
Slash / /
Left double quotation marks “ “
Right double quotation marks “ ”
Left single quotation marks ‘ ‘
Right single quotation marks ’ ’
Apostrophe ' '
Ampersand & &
Copyright © ©
Registered Trademark ® ®
Degree ° °
Left-pointing double angle « «
Right-pointing double angle » »
Non-Breaking Space  

1.3 CSS

CSS is a style sheet language used for describing the presentation of a document written in markup language.

1.3.1 Syntax

- Use two tab space for indentation (four space).
- Include one space before the opening brace of declaration blocks.
- Place closing braces of declaration blocks on a new line.
- Include one space after : for each declaration.
- End all declarations with a semicolon.
- Comma-separated property values should include a space after each comma (e.g., box-shadow).
- Don't include spaces after commas within rgb(), rgba(), hsl(), hsla(), or rect() values.
- Don't prefix property values or color parameters with a leading zero (e.g., .5 instead of 0.5 and -.5px instead of -0.5px).
- Lowercase all hex values, e.g., #fff.
- Avoid specifying units for zero values, e.g., margin: 0; instead of margin: 0px;.

1.3.2 Naming Convention

On large projects, there is chance to broke our styles in multiple files. In these cases, naming convention also makes it easier to find which file a style belongs to.

1.3.2.1 For styling grid use grid as prefix


HTML: <div class="grid-serviceList1">
      </div>   
CSS:  .grid-serviceList1 { }

1.3.2.2 For styling layout use layout as prefix


HTML: <div class="layout-primary">
       <p>Content</p>
      </div>
CSS:  .layout-primary { }

1.3.2.3 Naming convention for theming use theme as prefix


CSS: .theme-header {}

1.3.2.4 Naming convention for state use is as prefix


CSS: .is-active {},
     .button-is-active {}

1.3.2.5 Use “ - “ for seperating class name


CSS:.service-list { }

1.3.2.6 Use camelcase for subclass


CSS:  .service-listDetails { }

1.3.2.7 Subclass name should be start with the prefix module name 


CSS:  .service-list { }

1.3.3 Reusability

We want the option to be able to move, recycle, duplicate, and our components across our projects.so that we can use class instead of ID. ID can be used to identify one element, whereas a class can be used to identify more than one.

1.3.4 Selector performance

Selector performance is very important because we must know about how quickly a browser can match the selectors . The browsers read CSS selectors right-to-left. 


Bad practice:
body .home .header ul { }	

Good practice:
.header ul {}

1.3.5 Avoid !important

Avoid the use of important. We use !important for overwrite something. We can avoid the use of !important by using modular structured css.

1.3.6 Declaration order

If we write a class for a div, there is a declaration order for that style.
1. Positioning
2. Box model
3. Typographic
4. Visual 


.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;
}

1.3.7 Indentation

Indentation is a coding techniques to make our css clear. With out using indentation it’s hard to figure out where the code starts and ends. Use two tab space for indentation (4 space). 


.product {
  color:red; 
}

1.3.8 CSS Comments

Code is written and maintained by many developers. So that we should have to ensure your code is descriptive, well commented. Well comments will convey the purpose and all the developers can understand the code. 


//service start
.service {
  color:white;
}
//service end

//products start
.product {
  color:red;
}
//products end

1.3.9 Media query state

Media query state are used to set our website in different resolution. 

 
 Small phone - @media only screen and (min-width : 480px) {}
 Ipad - @media only screen and (min-width : 768px) and (max-width : 1024px) {}
 Desktop - @media only screen and (min-width : 1024px) and (max-width : 1440px) {}
 2K - @media only screen and (min-width : 1440px) and (max-width : 2160px) {}
 4K - @media only screen and (min-width : 2160px) and (max-width : 3840px) {}

1.4 Categorizing CSS rules

1. Base rules
2. Layout rules
3. Module rules
4. State rules
5. Theme rules

1.4.1 Base rules

Initially we can set our default style. Almost we use single element selector. it includes attribute selector, pseudo-class selector and child selector.
- single element selector - body ,html { }
- attribute selector – input[type=text]{}
- child selector - a {}
- pseudo-class selector - a:hover {}
- Initially we can define our background color, font family, font size for our entire project at the top of our style sheet. 


body {
 background-color: gray;
 font-family:roboto;
 font size: 14px;
 line-height:1.7;
 color: black;
 height:100%;
}

1.4.2 Layout rules

Layout is used to lay elements out on the page. Layout divide the page in to sections .Also it may contain several module together. There is a distinction between layouts dictating the major and minor components of a page. The minor components—such as a callout, or login form, or a navigation item—sit within the scope of major components such as a header or footer. 


#header, #article, #footer {
 width: 960px; margin: auto;
}
#article {
 border: solid #CCC; border-width: 1px 0 0;
}

1.4.2 Module rules

Module is a more discrete component of the page.Module placed inside the layout component.Module should be designed to exist as a standalone component.Modules can easily be moved to different parts of the layout without breaking. 


<div class="layout-primary"> // layout
 <div class="service service-list"> // module
  <div class="grid-serviceList"> 
   <p>content 1</p>
   <span>content 2 </span>
  </div>
 </div>
</div>

1.4.3 State rule

State rule describe how our module or layout looks when in a particular state. 


 Is it hidden or expanded - isHidden / isExpand 
 Is it active or inactive - isActive / isInactive

1.4.4 Theme rules

It is probably self-evident but a theme defines colours and images that give your application or site its look and feel. Separating the theme out into its own set of styles allows for those styles to be easily redefined for alternate themes. 


h1 {
 color:red;
}
.nav {
 font-size:12px;
 background:blue;
}

CSS Preprocessor-SASS

Sass is completely compatible with all versions of CSS. Sass boasts more features and abilities than any other CSS extension language out there. Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

1.5.1 Syntax


nav
 ul
  margin: 0
  padding: 0
 li
  display:inline-block
 a
  display: block
  padding: 6px 12px

1.5.2 CSS Extensions

The @extend directive is an outstanding way to inherit already existing styles.

		
.input {
 padding: 10px 20px;
 display: inline-block;
 outline: 0;
}
.error-input {
 @extend .input;
 border:4px solid #e74c3c;
}

1.5.3 Variables

Variables is a way to store information that you want to reuse throughout your stylesheet. You can store things like colors, font, or any CSS value you think you'll want to reuse. Sass uses the $ symbol to define variable. 

	
$primary-color: #333;
body { color: $primary-color; }

1.5.4 Nesting

Sass is the ability to nest declarations.If we want to reference the parent then we can use ‘&’ symbol at the beginning . 

	
.container {
 width: 100%;
 h1 {
  color: red;
 }
}

a {
 color: blue;
 &:hover {
  text-decoration: none;
 }
}

1.5.5 Partials

You have a SCSS file that you want to import but don't want to compile to a CSS file, you can add an underscore to the beginning of the filename. 

			
File name :  _colors.scss
Declaration: @import "colors";

1.5.6 Import

It is used to import scss files.All imported SCSS files will be merged together into a single CSS output file. 

			
@import "foo.scss";

1.5.7 Mixins

Mixins are allows you to include styles.Mixins are defined with the @mixin directive, followed by the name of the mixin and optionally the arguments and a block containing the contents of the mixin.Mixins are included in the document with the @include directive. 

	
@mixin large-text {
 font: {
  family: Arial;
  size: 20px;
  weight: bold;
 }
 color: #ff0000;
}


.page-title {
 @include large-text;
 padding: 4px;
 margin-top: 10px;
}

1.5.8 Function Directives

SassScript supports basic control directives and expressions for including styles only under some conditions.

@if

		
$type: monster;
p {
 @if $type == ocean {
  color: blue;
 } @else if $type == matador {
  color: red;
 } @else if $type == monster {
   color: green;
 } @else {
   color: black;
 }
}

@for

		
@for $i from 1 through 2 {
 .item-#{$i} { width: 2em * $i; }
}

@while

The @while directive takes a SassScript expression and repeatedly outputs the nested styles until the statement evaluates to false. 

		
$i: 6;
@while $i > 0 {
 .item-#{$i} { width: 2em * $i; }
 $i: $i - 2;
}