DEV Community: Sameer Trimade

Best Practices for Optimizing Frontend Performance

Sameer Trimade — Fri, 17 Mar 2023 03:12:23 +0000

Optimizing web performance from the frontend is essential because it can have a significant impact on the user experience of a website. The frontend of a website consists of the code that runs in the user's web browser and is responsible for displaying the content and functionality of the website. If the frontend code is inefficient or poorly optimized, it can result in slow page load times, unresponsive user interfaces, and other performance issues.

The main reason to optimize web performance from the frontend is:

Faster page load times: When a website loads quickly, it can improve the user experience and reduce bounce rates(bounce rates means the percentage of visitors to a particular website who navigate away from the site after viewing only one page). Optimizing frontend code can reduce the amount of time it takes for a website to load.
Better user engagement: A website that responds quickly and smoothly to user interactions can improve user engagement and increase the time spent on the site.

So, in this article, I will discuss best practices that can be used to optimize the frontend performance-

Minification of resources: It refers to the process of removing unnecessary, redundant data from your HTML, CSS, and JavaScript that are not required to load. This includes eliminating code comments and formatting, white space characters, unused codes, newline characters, and so on. Minification of HTML, CSS, and JavaScript will speeds up the frontend load times as it reduces the amount of code that needs to be requested from the server.
Reduce the Number of Server Calls: It is a crucial technique used to optimize web performance from the frontend. A server call occurs when the user's browser requests data from the server, such as images, stylesheets, or JavaScript files. Each server call adds additional overhead to the page load time and can impact the user experience.
Optimizing images: It is a crucial technique used to optimize web performance from the frontend. Images can be a significant contributor to the size of a web page, and larger image sizes can lead to slower page load times, which can negatively impact the user experience.
Using SVG (Scalable Vector Graphics) images is a popular technique used to optimize web performance from the frontend.
Here are some reasons why using SVG images can be beneficial for optimizing web performance:

(a) Smaller file size: Compared to images, such as JPEG or PNG, SVG images have a significantly smaller file size.

(b) Scalability: SVG images are highly scalable and can be resized without losing quality. This means that you can use the same image on multiple devices, such as desktops, tablets, and smartphones, without having to create different versions of the image.

(c) Faster loading times: Because SVG images have a smaller file size, they can be loaded more quickly than larger images such as JPEG or PNG, resulting in faster page load times.

Also using new image formats like WebP and AVIF gives a better performance than older formats like JPEG and PNG. WebP is 26% smaller compared to PNG and 25–35% smaller compared to JPEG. AVIF is 50% smaller compared to JPEG and 20% smaller compared to WebP. However, the downside is with the browser support. WebP gained browser support recently, so older versions might not support it. On the other hand, AVIF is only supported in Chrome and Opera.
Apply Lazy Loading: It helps to improve frontend loading time. With lazy loading, the web page loads only the required content first and loads the remaining content when the user needs it. Lazy loading is a technique that is widely used in real-world scenarios to improve web performance. Here are some examples of how lazy loading is implemented in different scenarios:
(a) Image-heavy websites: Websites that rely heavily on images, such as online stores or photography websites, can benefit greatly from lazy loading. In this scenario, images are loaded only when they are in the user's viewport, allowing the website to load faster and reducing the amount of data that needs to be transferred.

(b) Infinite scroll: Websites that implement infinite scroll, such as social media platforms, can also benefit from lazy loading. In this scenario, new content is loaded as the user scrolls down the page. By lazy loading the content, the initial page load time is reduced, and the user can continue to scroll without experiencing a lag in performance.

(c) Videos: Lazy loading is also commonly used for videos, especially on mobile devices, where data usage is a concern. In this scenario, a thumbnail image or preview is loaded initially, and the video is loaded only when the user clicks on the play button.

Overall, lazy loading is a powerful technique that can significantly improve web performance by reducing the initial page load time and improving the user experience.
Use a Content Delivery Network (CDN): A CDN can improve web performance by caching content closer to the user, reducing latency, and speeding up content delivery. When the user is far from the server geographically, latency increases. Moreover, request load could also impact the content serving time. The loading speed of frontend content, including HTML pages, stylesheets, JavaScript files, and images, can be optimized using a CDN. A content delivery network (CDN) is a group of servers distributed across several geographical locations that store a cached version of the content to deliver fast to the end-user. CDN redirects user requests to the nearest server.

By following these best practices, you can significantly improve web performance from the frontend, providing a better user experience for your website visitors.

Route protection in Angular

Sameer Trimade — Fri, 03 Mar 2023 04:58:38 +0000

In any complex web application, it is necessary to have some sort of authentication to restrict certain users from accessing specific pages.
For example-

Checking if a user has logged in. Suppose, if they’re not logged in, thus the guard will redirect to the register/login page.
Checking if a user has permission. It checks if the user have rights to access that page or not.

Route protection helps us in front-end frameworks to validate a route before it’s activated. Angular supports route protection via route guards.

A route guard validates a route and activates it only if authorized.

Angular allows you to authorize parent routes and child routes separately.

🌟 Implementing Route Protection in Angular using CanActivate

Angular supports the CanActivate interface to authorize parent routes. This interface is implemented by a class that determines whether the router can activate a specific route or not.
CanActivate Interface is defined in the @angular/router package. This Interface has one method i.e. canActivate. We need to implement it in our Service. The details of the CanActivate interface is as shown below.

The canActivate method gets the instance of the ActivatedRouteSnapshot and RouterStateSnapshot which we can use to get access to the route parameter, query parameter etc.
The guard must return true/false or a UrlTree. The return value can be in the form of observable or a promise or a simple boolean value.
A route can have more than one canActivate guard.
If all guards returns true, navigation to the route will continue.
If any one of the guard returns false, navigation will be cancelled and we may write some logic to navigate to some other route in this case.
The example of canActivate guard is as follows-

import { Injectable } from '@angular/core';
import {
  Router,
  CanActivate,
  ActivatedRouteSnapshot,
  RouterStateSnapshot,
} from '@angular/router';

@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(private _router: Router) {}

  public canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean {
    //check for some validation condition
    if (validation_Fails) {
      alert('You are not allowed to view this page');
      //redirect to login/home page etc
      //return false to cancel the navigation
      return false;
    }
    return true;
  }
}

In the route configuration file, update the route definition with the canActivate guard as shown below. You can also apply more than one guard to a route.

🌟 Implementing Route Protection in Angular using CanActivateChild

Angular supports the CanActivateChild interface to authorize child routes.
CanActivateChild Interface is defined in the @angular/router package. This Interface has one method i.e. canActivateChild. We need to implement it in our Service. The details of the CanActivateChild interface is as shown below.

The canActivateChild method gets the instance of the ActivatedRouteSnapshot and RouterStateSnapshot which we can use to get access to the route parameter, query parameter etc.
The guard must return true/false or a UrlTree. The return value can be in the form of observable or a promise or a simple boolean value.
A route can have more than one canActivateChild guard.
If all guards returns true, navigation to the route will continue.
If any one of the guard returns false, navigation will be cancelled and we may write some logic to navigate to some other route in this case.
We apply CanActivateChild guard to the parent route. The Angular invokes this guard whenever the user tries to navigate to any of its child route.

🌟 Controlling navigation using CanDeactivate

We use the CanDeactivate guard when we want to prevent the user from accidentally navigating away. The best use case for CanDectivate guard is the data entry component. The user may have filled the data entry and tries to leave that component without saving his work. The CanDeactivate guard gives us a chance to warn the user that he has not saved his work and give him a chance to cancel the navigation.

Conclusion-
Overall, route protection is an essential part of building secure and user-friendly Angular applications. By using route guards and other protective measures, you can ensure that your application is accessible only to authorized users and that sensitive data is kept safe from unauthorized access.

Using Renderer2 in Angular

Sameer Trimade — Tue, 21 Feb 2023 03:57:57 +0000

In Angular, Renderer2 is a class that provides a way to manipulate the DOM (Document Object Model) in a way that is safe and efficient.

In Angular, Renderer2 is a class that provides a way to manipulate the DOM (Document Object Model) in a way that is safe and efficient. It's a low-level API that abstracts away the differences between browsers and provides a platform-independent way to manipulate the DOM.

Renderer2 provides a set of methods that you can use to create, modify, and remove DOM elements, as well as to set and remove attributes, styles, and event listeners. By using Renderer2, you can manipulate the DOM in a way that is safe and efficient, and that works seamlessly with Angular's change detection mechanism.

It's important to use Renderer2 methods to manipulate the DOM in Angular, rather than using the native DOM API directly.

Here's a brief explanation of how to use Renderer2:

1) Inject Renderer2: To use Renderer2, you need to inject it into your component or service. You can do this by adding it as a parameter in the constructor:

import { Component, Renderer2 } from '@angular/core';

@Component({
  selector: 'my-component',
  template: '<div #myDiv></div>',
})
export class MyComponent {
  constructor(private renderer: Renderer2) {}
}

2) Use Renderer2 methods: Once you have the Renderer2 instance, you can use its methods to manipulate the DOM. For example, you can create a new element and append it to an existing element:

const newElement = this.renderer.createElement('div');
const existingElement = this.renderer.selectRootElement('#myDiv');
this.renderer.appendChild(existingElement, newElement);

In above example, we're creating a new div element using the createElement method. Then, we're selecting the existing div element with the selectRootElement method, and appending the new element to it using the appendChild method.

You can also use other methods of Renderer2 to manipulate the DOM, such as setAttribute, removeClass, setStyle, and so on.

Methods provided by the Renderer2 class in Angular

Here are some of the methods provided by the Renderer2 class in Angular:

createElement(name: string, namespace?: string): any: This method creates a new element with the given tag name and namespace (giving namespace to createElement method is optional).
createText(text: string): any: This method will create a new text node with the given text content.
appendChild(parent: any, newChild: any): void: This method will append a child node to the end of the parent node.
removeChild(parent: any, oldChild: any): void: This method will remove a child node from the parent node.
selectRootElement(selectorOrNode: string | any): any: This method will find the root element of a view using a selector string or a node reference.
setAttribute(el: any, name: string, value: string, namespace?: string): void: This method will set an attribute value for an element.
removeAttribute(el: any, name: string, namespace?: string): void: This method will remove an attribute from an element.
addClass(el: any, name: string): void: This method will add a CSS class to an element.
removeClass(el: any, name: string): void: This method will remove a CSS class from an element.
setStyle(el: any, style: string, value: any, flags?: RendererStyleFlags2): void: This method will set a CSS style property for an element.
removeStyle(el: any, style: string, flags?: RendererStyleFlags2): void: This method will remove a CSS style property from an element.
setProperty(el: any, name: string, value: any): void: This method will set a property value for an element.
listen(target: any, eventName: string, callback: (event: any) => boolean | void): () => void: This method will register an event listener for a DOM element.

These are just some of the methods provided by Renderer2. There are many more methods that you can use to manipulate the DOM in a safe and efficient way in your Angular application.

Observables and RxJs operators in Angular.

Sameer Trimade — Mon, 13 Feb 2023 18:31:09 +0000

What are Observables in Angular?

An Observable can be thought of as a data source. In Angular project, an Observable is basically an Object we import from a third party package called RxJs. The Observable is implemented in such a way that it follows the observable pattern that means we have an Observable, then we have an Observer and in between we have a stream(or timeline) and on this timeline we can have multiple events emitted by the Observable. So, an Observable could emit data because you trigger it to do so, for example-

Suppose, an Observable is connected to a button so whenever the button is clicked an event in a data package is emitted automatically.
Suppose, an Observable is connected to HTTP request so when the response returns, the response is emitted as a data package.

Observer- is actually our own code meaning it is the .subscribe() function where we have 3 ways of handling data packages-

handle data of the Observable
handle error of the Observable
handle completion of the Observable

We use Observables to handle Asynchronous tasks (because all the data sources like User events, Http request etc. are Asynchronous tasks, meaning you don’t know when these tasks will happen and how long they will take to finish. So when you execute your normal application code, you don’t want to wait for these events or you don’t want to wait for completion of such HTTP request because that would block execution of your normal application code).

In the below piece of code 👇, we are using params as an Observable and here we do subscribe to the Observable to be informed about changes in the data.
params is a stream of route parameters and this stream gives us a new route parameter whenever we go to a new page, whenever that parameter in the URL changes and then in the .subscribe function we get new route parameter.

ngOnInit() {
    this.route.params.subscribe((paramsData: Params) => {
      this.id = +paramsData.id;
    });
  }

You don’t need to unsubscribe to the Observables that are provided by Angular (It is internally done by Angular). For example- the params Observable is provided by Angular so we don’t need to unsubscribe it.

NOTE: Observable is a feature which is not provided by JavaScript or Typescript, instead it is provided by RxJs which is a 3rd party package.

In the below piece of code 👇, we are using a function called interval() provided by the RxJs package. The interval() function returns an Observable that emits sequential numbers after every specified interval of time(in milliseconds).

import { Component, OnDestroy, OnInit } from '@angular/core';
import { interval, Subscription } from 'rxjs';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css'],
})
export class HomeComponent implements OnInit, OnDestroy {
  private observableSubscription$: Subscription;
  constructor() {}

  ngOnInit() {
    this.observableSubscription$ = interval(1000).subscribe((count) => {
      console.log(count); // ---> Output: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9 …………so on
    });
  }

  ngOnDestroy(): void {
    this.observableSubscription$.unsubscribe();
  }
}

interval() function returns an Observable therefore we need to subscribe to this Observable to receive the emitted value. Looking at the above implementation, the interval() function after every 1 second will print the emitted value on the browser console.

(With respect to above piece of code) ——> If the HomeComponent is destroyed, maybe via navigating away from the component or using the destroy(...)method, we will still be seeing the console log on the browser. This is because the AppComponent has been destroyed but the subscription still lives on, it hasn't been canceled.

If a subscription is not closed the function callback attached to it will be continuously called, this poses a huge memory leak and will slow down the overall app performance.

To prevent this memory leaks we have to unsubscribe from the subscriptions, we do so by calling the unsubscribe method in the Observable.

In Angular, we have to unsubscribe from the Observable when the component is being destroyed. Luckily, Angular has a ngOnDestroy hook that is called before a component is destroyed, this enables developer to call the unsubscribe method which will avoid hanging subscriptions, open portals, and all that may come in the future to bite us back.

NOTE-
Whenever we use Observables in a component in Angular, we should set up the ngOnDestroy method, and call the unsubscribe method on all of the Observables.

RxJs Operators in Observable-

Sometimes we don’t want the raw data from the .subscription() method. We might want to transform this raw data or filter some data points. We can do this inside the .subscription() method but there is another better approach. We can make use of Operators between an Observable and a .subscription() method, this means that the data points will first reach the Operators that manipulates the data and then we use .subscription() method to get the result of these operators.
We can use Operators on any Observable by calling a method called .pipe() which is provided by the RxJs package.

Here are some commonly used RxJS operators in Angular:

1) map operator-
The map operator takes an Observable as its input and returns a new Observable as its output. The new Observable emits the values from the original Observable, but transformed by the function you provide to the map operator. The function takes each value from the original Observable and applies a transformation to it, returning a new value that is emitted by the new Observable.
Here's a simple example of using the map operator to double the values of an Observable:

import { of } from 'rxjs';
import { map } from 'rxjs/operators';

const numbers = of(1, 2, 3);
const doubledNumbers = numbers.pipe(map(x => x * 2));

doubledNumbers.subscribe(x => console.log(x));
// Output: 2, 4, 6

In this example, the numbers Observable emits the values 1, 2, and 3. The map operator takes this Observable as input and returns a new Observable, doubledNumbers, which emits the values 2, 4, and 6, which are the original values doubled.

2) filter operator-
The filter operator takes an Observable as its input and returns a new Observable as its output. The new Observable emits only the values from the original Observable that pass a test specified by the function you provide to the filter operator.

Here's a simple example of using the filter operator to only emit even numbers from an Observable:

import { of } from 'rxjs';
import { filter } from 'rxjs/operators';

const numbers = of(1, 2, 3, 4, 5);
const evenNumbers = numbers.pipe(filter(x => x % 2 === 0));

evenNumbers.subscribe(x => console.log(x));
// Output: 2, 4

In this example, the numbers Observable emits the values 1, 2, 3, 4, and 5. The filter operator takes this Observable as input and returns a new Observable, evenNumbers, which emits only the values that are even numbers, in this case 2 and 4.

3) tap operator-
The tap operator takes an Observable as its input and returns the same Observable as its output. The difference is that it allows you to perform a side effect, such as logging or performing a state update, for each value emitted by the Observable.

Here's a simple example of using the tap operator to log each value emitted by an Observable:

import { of } from 'rxjs';
import { tap } from 'rxjs/operators';

const numbers = of(1, 2, 3);
const loggedNumbers = numbers.pipe(tap(x => console.log(x)));

loggedNumbers.subscribe();
// Output: 1, 2, 3

In this example, the numbers Observable emits the values 1, 2, and 3. The tap operator takes this Observable as input and returns the same Observable, but with a side effect that logs each value. When the loggedNumbers Observable is subscribed to, it logs the values 1, 2, and 3.

Note that the tap operator doesn't modify the values emitted by the Observable. It's only used to perform side effects. If you need to modify the values, you can use other operators like map or filter in combination with tap.

4) switchMap operator-
The switchMap operator takes an Observable as its input and returns a new Observable as its output. The new Observable emits values from the most recent inner Observable created by the function you provide to the switchMap operator. The function takes each value from the original Observable and maps it to a new inner Observable.

Here's a simple example of using the switchMap operator to fetch data from an API based on user input:

import { of, fromEvent } from 'rxjs';
import { switchMap } from 'rxjs/operators';

const input = document.querySelector('input');
const input$ = fromEvent(input, 'input');

const apiCall = query => of({ query, data: `Result for ${query}` });

const data$ = input$.pipe(
  switchMap(event => apiCall(event.target.value))
);

data$.subscribe(data => console.log(data));

In this example, the input$ Observable emits events whenever the user types in the input field. The switchMap operator takes this Observable as input and returns a new Observable, data$, which emits values from the API call. The API call is made using the apiCall function, which takes the current input value and returns an Observable with the API response.

Each time a new value is emitted by the input$ Observable, the switchMap operator cancels any previous inner Observables and creates a new one based on the latest value. This allows for the most recent API request to be used, and any previous requests to be discarded.

5) finalize operator-
The finalize operator takes an Observable as its input and returns the same Observable as its output. The difference is that it allows you to perform a side effect, such as cleanup or resource disposal, when the Observable completes or errors.

Here's a simple example of using the finalize operator to log a message when an Observable completes:

import { of } from 'rxjs';
import { finalize } from 'rxjs/operators';

const numbers = of(1, 2, 3);
const loggedNumbers = numbers.pipe(finalize(() => console.log('complete')));

loggedNumbers.subscribe();
// Output: 1, 2, 3, complete

In this example, the numbers Observable emits the values 1, 2, and 3. The finalize operator takes this Observable as input and returns the same Observable, but with a side effect that logs a message when the Observable completes. When the loggedNumbers Observable is subscribed to, it logs the values 1, 2, and 3, and then logs the message "complete".

To summarize, these are just a few of the many operators available in RxJS. Operators can be combined to create complex data processing pipelines, allowing you to handle and transform data in a variety of ways.

CSS Methodologies

Sameer Trimade — Wed, 12 Jan 2022 14:18:10 +0000

Writing CSS is easy. Making it scalable and maintainable is not.

You must have experienced the scenario when you update the CSS of your application and you broke something else?
did you wonder where the CSS you have to change is coming from?
did you update some HTML and it broke your design?
did you write some CSS and wonder why it wasn’t applied to the browser and then ultimately discovered that it was overridden by some other CSS?

This is when you decide there is a better way and come across some CSS methodologies, which seems like a good solution to all those headaches.

There are multiple CSS methodologies , but at the end of the day, it’s all about what fits your projects.

Also, you may think you’re perfectly fine without them and you may be right. But you might be missing out on big improvements too. You should at least have an idea on what’s out there and why you're or you’re not using it.

⭐ It’s all about maintaining your CSS code and reusability ⭐

The Big Reveal !!!
There is no best CSS methodology. It depends on you and the type of your project.

Top 3 CSS methodologies:

OOCSS (Object Oriented CSS)
BEM (Block Element Modifier)
SMACSS (Scalable and Modular Architecture CSS)

Applying a modular approach to your CSS will save you hours.
Web components are the future of the web and starting now will make your life easier.
Each piece of your application helps you build the final results and you should be able to move or replace it without breaking anything else. This is the goal most CSS methodologies aim for.

OOCSS Methodology

OOCSS stands for Object Oriented CSS.
OOCSS is concerned with converting your regular CSS styles to reusable classes.

OOCSS has two major principles
1. Separate structure and skin:
The structure refers to invisible styles applied to elements (width, height, margin, padding) while the skin is the visible styles (colors, fonts, shadows).
OOCSS defines these 2 separately. For example, Below there is a random snippet of CSS:

.button-1 {
    width: 100px;
    height: 50px;
    background: #000;
    color: #fff;
 }

 .button-2 {
    width: 100px;
    height: 50px;
    background: #fff;
    color: #333;
 }

We can see in the previous example that both classes have the same structure but differs in the skin properties. OOCSS deals with this situation and separate them as follows:

.button-1 {
    background: #000;
    color: #fff;
 }

 .button-2 {
    background: #fff;
    color: #333;
 }

 .btn-structure {
    width: 100px;
    height: 50px;
 }

Now we don't have redundant code and the .btn-structure class can be used on any button having the same structure.

2. Separate container and content:
Content refers to the elements such as images, paragraphs, divs which are nested inside other elements that serve as Containers. CSS Styles used for Content elements should be independent of the Container class so that it can be used without restrictions on their parent element. For example, this is a random piece of code dealing with the styling for a sidebar component.

#sidebar {
    left: 0;
    margin: 3px;
    position: absolute;
    width: 140px;
}

#sidebar .list {
    margin: 3px;
}
#sidebar .list .list-header {
    font-size: 16px;
    color: red;
} 

#sidebar .list .list-body {
    font-size: 12px;
    color: #FFF;
    background-color: red;
}

But if we separate content from container, it will something like this:

#sidebar {
  padding: 2px;
  left: 0;
  margin: 3px;
  position: absolute;
  width: 140px;
}

.list {
  margin: 3px;
}

.list-header {
  font-size: 16px;
  color: red
}

.list-body {
  font-size: 12px;
  color: #FFF;
  background-color: red;
}

Now these classes can be used in many situations without the restriction of having a parent with an id of #sidebar or .list.

Advantages of OOCSS:

Improved Scalability and Reusability.
Better Readability.

Disadvantages of OOCSS:

It is not suitable for small projects.
It increases number of classes.

BEM Methodology

BEM stands for Block-Element-Modifier.
When the use of CSS is no longer to just style the personal websites or small projects and moves to large, scalable and complex projects, there is a need to organize and think about the architecture for the CSS. Simple things like class naming can become a huge problem in future maintenance.
To correct problems like these, some organizational architectures and methodologies were created and one of the most popular is BEMCSS.

What is BEM?

The acronym comes from Block-Element-Modifier, which is basically a method to create names for the CSS classes.
The idea is to create a rigid standard for class naming, making it easy to read and understand what the class does and what component it targets.

⭐ The class names follow the line
.block__element--modifier {}

One point to Note here is that there are Two underlines that separate the block from the element and two lines that separate the element from the modifier.

Block:

A block is an independent, modular UI component.
A block may be composed of multiple HTML elements, or even multiple blocks.

So basically a Block is the element or component that a class is assigned to. You don't need to respect the name of the element, the idea is that it describes what the component is doing in the scope of the project. For example, if you create a class for a login form, the name would not be .form, even though in HTML you do create a form.
In the scope of the project the class could be .Login, which would make it clear to everyone what it is about. A general naming rule is to separate compound names with a single dash for example, .select-box-container would be the correct way to write a name with three words.

For example, .login, .select-box-container

Element:

An element is a component of a block. Each element serves a singular purpose.
For example, if you have a navigation menu block, then elements of it might be your navigation menu’s links, which in turn might be in the form of list items (li elements) and anchor tag’s (a elements).

The Element are internal parts of the component. In the example shown in previous slide, inside the login block there would be multiple inputs for the username, email, password and few action button's.
So the CSS class naming convention for block-element will be like,
.login__username, .login__email, .login__password, .login__button

Modifier:
A modifier is a CSS class that changes the default presentation of a block or element.
For example, in the login form when the user put something that does not match the password or email in the inputs and there was a check to confirm this, the visual feedback of the error, for example, could be done by changing the colors of the edges of the incorrect inputs to red. The modifier class that would be used to create this case will be in this way:
.login__email--error {}

The modifiers can also be used for the block as a whole, and can be applied directly over it in the class, ignoring the existence of the elements. For example, .login--error {}

Point to remember:

We have to remember that each element has its class in an isolated way. For example, if an element has another element within it, it is not correct to join the elements into a single class, such as:

.block__class1__class2__class3 {}

In these cases each element has its own class, ignoring the order of the HTML structure, such as:

.block {}
.block__class1 {}
.block__class2 {}
.block__class3 {}

Advantages of using BEM:

BEM is a very robust class-naming convention.
It successfully distinguishes the different concerns that classes are used for.
It is easy to see in the markup which classes are related to one another.

Disadvantages of using BEM:

The class names can end up being long and ugly.
The naming convention is not intuitive to inexperienced developers.

SMACSS Methodology

SMACSS stands for Scalable and Modular Architecture for CSS.
SMACSS offers a simpler naming convention than BEM.
There are no class names for base styles because only type selectors like { h1, p, a, etc. } are used for those.
Modules are given their own unique class names. Also, in SMACSS the Sub-components and variations are prefixed with the name of their parent module.
SMACSS is a style guide rather than a framework.

SMACSS is all about organising your CSS in 5 Categories:
1) Base: Base rule is applied to an element using an element selector, a descendent selector, or a child selector, along with any pseudo-classes. It is defining the default styling for how that element should look in all occurrences on the page.
This category include applying CSS to the selector. No CSS is applied to classes or id here. This is to reset browser rules and set a base style for elements which are going to be consistent and reused.
In this category you are defining the default style for your elements. This can include html, body, h1, h2, h3, h4, h5, h6, a, img.

An example for the BASE rule is given here,

body, form {
  margin: 0;
  padding: 0;
}

a {
  color: #039;
}

a:hover {
  color: #03F;    
}

2) Layout:

This is where the style used to lay out your pages will sit. It should be separated from your module style for flexibility.
Layout styles can also be divided into major and minor styles based on reuse.
Major layout styles such as header and footer are traditionally styled using ID selectors but it takes time to think about the elements that are common across all components of the page and use class selectors where appropriate.
Therefore, Usually layout modules are not many so id selector can be used.

An example for the LAYOUT rule is given here,

#header, #article, #footer {
  width: 960px;
  margin: auto;
}

#article {
  border: solid #CCC;
  border-width: 1px 0 0;
}

3) Module:

A module is a part or a component of your page. Your menu, dialog box, download list or any widget you have on your page can be a module.
A module is independent from your layout so it can live anywhere in you application.
You should be able to copy/paste the html and move somewhere else, and it will look and behave the same.
Each Module should be designed to exist as a standalone component. In doing so, the page will be more flexible. If done right, Modules can easily be moved to different parts of the layout without breaking.

An example for the MODULE rule is given here,

<ul class="tabnav">
    <li class="" tabnav__item"><a href="" class="tabnav__link">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
</ul>

.tabnav {
  display: flex;
}

.tabnav li {
  border-top: 1px solid black;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}

.tabnav li:first-child {
  border-left: 1px solid black;
}

.tabnav li a {
  display: block;
  padding: 10px 30px;
  text-decoration: none;
}

4) State:

A state will be a style which modifies or overrides other rules.
Good practise is to prefix or add a namespace to the classes which fall under this category like is- or has- --> is-hidden, is-displayed, is-collapsed, has-children, etc.
A great example is accordion when collapsing or expanding elements. Using a is-collapsed class will make sure your element is collapsed.
This is a good place to use !important (and probably the only one) as you want this state to be applied no matter what.

.is-active {
    background-color: red;
}

.is-hidden {
    pointer-events: none;
    color: black;
}

5) Theme:
In Theme rule, the idea is to have a file called theme.css where you can define all the theme rules. For example,

// in module-name.css
.mod {
    border: 1px solid;
}

// in theme.css
.mod {
    border-color: blue;
}

Advantages of using SMACSS:

Modular.
Flexible.
Better file organisation.

Disadvantages of using SMACSS:

No specific naming convention to write a class.
Modules and submodules can be hard to identify.

*Thank you for reading this blog post!!! 🙂 *