1. GRUNT

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc,

the easier your job becomes. ​

• npm install -g grunt-cli (For global installation)
• npm install grunt --save-dev (for local grunt )
• gruntFile.js (for config file)
• grunt (To run grunt task)

2. BEM 

Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development

Block

HTML

<div class="block" >

CSS

.block{

  some-css:style;

}

Element

HTML

<div class="block__elem" >

CSS

.block__elem{

  some-css:style;

}

Modifier

HTML

<div class="block__elem--modifier" >

CSS

.block__elem--modifier{

  some-css:style;

}

Advantages

Easy

Modular

Flexible

Low specificity (Simple class selector, avoid combining classes)

Clear relationship between blocks,elements and modifiers

Encapsulation / name-spacing

3. SASS/SCSS

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

Features

• Preprocessing
• Variables
• Nesting
• Partials
• Import
• Mixins
• Inheritance
• Operators

6. HTML Framework

List of Frameworks

Bootstrap

Material Design

Foundation

7. Flux Architecture

Flux is an architecture that Facebook uses internally when working with React. It is not a framework or a library. It is simply a new kind of architecture that complements React and the concept of

Unidirectional Data Flow.

Components

Actions - Helper methods that facilitate passing data to the Dispatcher

Dispatcher - Receives actions and broadcasts payloads to registered callbacks

Stores - Containers for application state & logic that have callbacks registered to the dispatcher

Controller Views - React Components that grab the state from Stores and pass it down via props to child components.