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.

2. Why Guidelines

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

3. CSS

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

3.1 Syntax

  • Use one tab space for indentation (two 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;.

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.

For theming use theme as prefix

.theme-header {}

For state use is as prefix

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

Use “ - “ for seperating class name

.service-list { }

Use camelcase for subclass

.service-listDetails { }

Subclass name should be start with the prefix module name

.service .service-list { }

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.

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 {}

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.

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

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 one tab space for indentation (2 space).

.product {
   color:red;
}

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.

//products start

.product { color:red; }

//products end

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 Device

@media only screen and (min-width : 1440px) and (max-width : 2160px) {}

4K Device

@media only screen and (min-width : 2160px) and (max-width : 3840px) {}

4. Categorizing CSS rules

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

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

4.3 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">
   <div class="service service-list">
     <div class="grid-serviceList">
        <p>content 1</p>
        <span>content 2 </span>
      </div>
   </div>
</div>

4.4 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

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