Puru Vijay

***[CSS Modules](https://github.com/css-modules/css-modules)*** are "CSS files in which all class names and animation names are scoped locally by default". Instead of having CSS files and classes that are static, CSS Modules creates a dynamic implementation that is locally scoped to the HTML with the help of  [Webpack](https://webpack.github.io/) or [Browserify](http://browserify.org/).

[CSS Modules](https://github.com/css-modules/css-modules) is popular in React because of the following reasons:

1. **Scoped**: [CSS Modules](https://github.com/css-modules/css-modules) are scoped when you use them the right way.
2. **Highly composable**: You can compose different styles in a lot of ways.
3. **Tree shakable**: Styles you don't use are removed, just like modern JS tooling.
4. **Very easy to pick up**: [CSS Modules](https://github.com/css-modules/css-modules) are very easy to understand and take almost no effort to start using.
5. **It's just CSS**: [CSS Modules](https://github.com/css-modules/css-modules) are just CSS that you write with some specific rules in mind. You get great tooling from your IDE, and IDEs are great at plain ol' CSS.

CSS Modules work seamlessly with pre-processors like [SASS](https://sass-lang.com/), [LESS](https://lesscss.org/), and [Stylus](https://stylus-lang.com/). It also works with [PostCSS](https://postcss.org/).

What is [PostCSS](https://postcss.org/)?

[PostCSS](https://postcss.org/) is CSS converted for CSS Modules, which gets rid of global CSS classes and ids. This reduces naming conflicts and global space pollution as your project grows.

## **How to use CSS Modules in React**

Let's start with an example. We're going to build a Card component. This will be our directory structure:

```
 |- Card.jsx
 |- Card.module.css
```

We're naming our CSS file a `*.module.css` because it is a convention. It is also how build tools know that it is a CSS Module file.

Now let's look at the CSS file. We used specifically camel casing for our css `class` so that it matches our JavaScript casing.

```css
 /* Card.module.scss */
 .container {}
 .avatar {}
 .userInfo {}
 .userName {}
 .userStatus {}
```

Under normal circumstances and for plain CSS, we'd just use our CSS classes with `className`. For example - `<div className="userStatus">...</div>`. However, for CSS Modules, we surround our CSS with `{}` . So the React code looks something like this: `<div className={css.userStatus}>...</div>`

Here is an example with the imported `'./Card.module.scss'` CSS Module:

```javascript
 import css from './Card.module.scss';
 
 export const Card = () => {
   return (
     <section className={css.container}>
       <img className={css.avatar} src="..." />
       <div className={css.userInfo}>
         <div className={css.userName}>...</div>
         <div className={css.userStatus}>...</div>
       </div>
     </section>
   );
 };
```

Instead of regular static strings, we're using `css.*` values. This is because the CSS classes are being used like JavaScript modules. It is also a reason why we use camel casing instead of dashes in our CSS.

## **How CSS Modules work under the hood**

When you import a CSS module file, it looks something like this:

```javascript
 export const container = '_container_bslv0_1';
 export const avatar = '_avatar_bslv0_8';
 export const userInfo = '_userInfo_bslv0_14';
 export const userName = '_userName_bslv0_21';
 export const userStatus = '_userStatus_bslv0_40';
 export default {
   container: container,
   avatar: avatar,
   userInfo: userInfo,
   userName: userName,
   userStatus: userStatus,
 };
```

The build tools transforms our class names into variables that are exported separately as named exports and as an object. Another CSS file gets generated and then mapped to the associated `const` . As a result, your CSS is specifically scoped to the space it is used. Here is an example:

```javascript
 ._container_bslv0_1 {}
 ._avatar_bslv0_8 {}
 ._userInfo_bslv0_14 {}
 ._userName_bslv0_21 {}
 ._userStatus_bslv0_40 {}
```

It is good to note that by default **CSS Modules are scoped only to classes**. This means that `#id` and global selectors are not processed by CSS Modules. However, descendants of classes are scoped. For example `.container img` will be scoped by CSS Modules but `img` on its own will not.

# **CSS Modules features and how to use them**

Besides scoping, CSS Modules also lets you:

- create global styling
- compose multiple styles together
- create variables

### **Create global style in React with CSS Module via :global**

`:global` is a way to create global selectors with CSS Modules. Here is an example of SCSS code with the `:global` flag.

```javascript
 .container {
   .someRandomDiv {
     .header {
       color: green;
     }
 
     :global(body.dark) .header {
       color: blue;
     }
   }
 }
```

## **Composing multiple styles together**

In CSS Modules, you can create a class and then compose it within other classes by using the `composes` selector. Here is an example:

```
 .classA {
   background-color: green;
   color: white;
 }
 
 .classB {
   composes: classA;
   color: blue;
 }
```

The classes being called in by `compose` do not have to be in the same file. It can be imported in. For example:

```
 .classB {
   composes: classA from './classB.css';
   color: blue;
 }
```

The `composes` selector allows us to build highly reusable styles, resulting in easier orchestration of design systems.

## **CSS variable systems with CSS Modules**

CSS Modules have a variable system that allows you to efficiently create DRY values for your CSS.

```
 @value blue: #0c77f8;
 @value red: #ff0000;
 @value green: #aaf200;
 
 .button {
   color: blue;
   display: inline-block;
 }
```

In the example above, we've redefined the browser defaults for `blue`, `red` , and `green`. For cleaner referencing and reusability, these values can be defined in a separate file and imported in.

```
 /* import your colors... */
 @value colors: "./colors.css";
 @value blue, red, green from colors;
 
 .button {
   color: blue;
   display: inline-block;
 }
```

# **Visual Studio Code import error for CSS Module**

CSS Modules are great but if you are using Visual Studio Code, Intellisense can create issues. For example, although technically correct, if you are working with TypeScript, the following will create an error:

```
 import css from './Card.module.css';
```

This is because VSCode will import it as a `css` file and not as a CSS Module file. There are two ways to fix it:

- edit your `types.d.ts` file
- or, install `typescript-plugin-css-modules`

> Note: If you're using create-react-app or Vite's react scaffolds, you don't need the steps below, they already have the minimal configuration built-in to allow .css, .scss, .less, .styl, etc in import statements.

### **Fix 1: Editing types.d.ts**

Create a `types.d.ts` in your `src` folder and put in the following configuration:

```
 declare module '*.module.css' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.scss' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.sass' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.less' {
   const classes: { [key: string]: string };
   export default classes;
 }
 
 declare module '*.module.styl' {
   const classes: { [key: string]: string };
   export default classes;
 }
```

This will tell VSCode to interpret your CSS Modules as key-pair values. This will fix your warnings with using `css.*` in your code because it now knows to return a string.

![https://res.cloudinary.com/layercode/image/upload/v1628263501/css_modules_intellisense_demo_567ef36d33.gif](https://res.cloudinary.com/layercode/image/upload/v1628263501/css_modules_intellisense_demo_567ef36d33.gif)

### **Fix 2: Use typescript-plugin-css-modules**

Using `typescript-plugin-css-modules` is the quickest way to set up any TypeScript project with CSS Modules. Use the following commands to install `typescript-plugin-css-modules`.

```
 npm i --save-dev typescript-plugin-css-modules
 
 # Or if you're a yarn person
 
 yarn add --save-dev typescript-plugin-css-modules
```

Next, open up your `tsconfig.json`, and add the following to the `compilerOptions` property:

```
 "plugins": [{ "name": "typescript-plugin-css-modules" }]
```

Set VSCode TypeScript version to the one that's used on your project. You can view the version on the bottom left of your console.

![https://res.cloudinary.com/layercode/image/upload/v1628263541/css_modules_typescript_version_photo_1_2c9fe63906.png](https://res.cloudinary.com/layercode/image/upload/v1628263541/css_modules_typescript_version_photo_1_2c9fe63906.png)

If you click on it, a list popup will open up and you can select your TypeScript version.

![https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_2_f19d891815.png](https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_2_f19d891815.png)

![https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_3_55b7f6251b.png](https://res.cloudinary.com/layercode/image/upload/v1628263548/css_modules_typescript_version_photo_3_55b7f6251b.png)

# **Using clsx for cleaner CSS Modules conditionals**

CSS Modules rely on using the `css.*` pattern, composing multiple classes can result in long strings. For example:

```
 <div className={`${css.classA} ${css.classB} ${css.classC}`} />
```

It looks a little ugly, but it's still manageable. However, once you start having conditional classes, things can get uglier. For example:

```
 <div className={`${css.classA} ${condition1 ? css.classB : ''} ${condition2 ? css.classC : ''}`} />
```

It's easy to fall into a ternary trap. We have to render an empty string manually if the condition is false. If we did just `condition1 && css.classB`, it would've been pretty clean and legible. But if the condition is `false`, it would output `null` as a class name.

To make this cleaner, we can use the `clsx` library. It's a small 228B library that makes dealing with class composition much easier.

Here is how you can use it for cleaner composition:

```
 <div
   className={clsx({
     [css.classA]: true,
     [css.classB]: condition1,
     [css.classC]: condition2,
   })}
 />
```

# **Wrapping up**

CSS Modules are one way to upgrade your CSS and make it more manageable in the long run. CSS scoping reduces the manual work required for matching CSS classes to the right context. It also reduces visual errors caused by global conflicts.

CSS Modules also encourage DRY patterns in your code. It is not exclusive to React and can also be used with other frontend libraries such as Angular and Vue. No one wants to use `!important` overrides in CSS because it's a slippery slope. However, `!important` becomes tempting as the project grows and there are multiple people working in a team. CSS Modules are one way to solve this issue.

Frontend

What are CSS Modules and how to use it in React 

Isuri Devindi

UI patterns is what makes the web what it is. It is a collection of repeated elements, arranged in ways that are aesthetically pleasing to the eye, optimized for different screen sizes and targeted at creating a positive user experience.

Modal dialogs is a popular user inter user interface pattern to display additional information without moving to another page. However, it can also affect the user experience (UX) if not implemented correctly.

But what exactly are modal dialogs? In a nutshell, modal dialogs are like popups that occurs when an action is required before the user is able to proceed to the next step. 

Here is a quick rundown on when to use modals, how to implement modals in React and libraries that you can use for faster development. 

## When Should We Use Modals?

Modals can be helpful to display information while keeping the screen in its current state. Here are some typical places that modals are used:

1. **When the user’s attention is needed immediately —** If the user’s session has expired and has to sign in again.
2. **To display warnings about a user’s action that has severe consequences or is difficult to reverse —** When the user is about to deactivate the account.
3. **When the user’s input is needed to complete a task —** To subscribe to a newsletter, the user is required to enter the email address.
4. **Show additional information about something on the parent page —** To display a calendar event in more detail.

While modals are great, they should be used sparingly to prevent a negative user experience. Too many modals that doesn't require immediate action can reduce a user's positive response. 

## When to Avoid Using Modals

It's easy to use modals as part of your app's flow. However, too many modals can result in additional and unecessary clicks or taps, and a diversion of attention from what the user may actually be searching for. Here are scenarios where modals can hinder rather than enhance a user's experience.

### 1. To show error, wait, or success states

Modals are not effective for displaying user input errors, loading status, or success messages because they block the parent screen. Instead, it’s better to use them as a part of the user input.


### 2. System-initiated Modals for promotional purposes

System-initiated Modals interrupt the user’s current task and force them into doing a specific action. Modern-day users dismiss such uninvited Modal windows instinctively. Therefore, it is less effective to use them for promotional purposes.

![modals-2.png](https://res.cloudinary.com/layercode/image/upload/v1636906776/modals_2_38e1b2a0fc.png)

### 3. Modals in mobile devices

Mobile screen real estate is minimal, meaning that all elements on the page needs to be curated based on priority. It is often difficult for users to view and manipulate the modal window. In addition to this, users also might be dealing with other UI elements such as a keyboard and nested scrollbars. In short, it is best to avoid modals on mobile devices.

## Best practices to implement the Modal

Here is a user experience best practice guideline when it comes to implementing modals.  

### Make the dismiss control visible to the user

A good Modal should always be user-initiated. At the same time, the user should have the ability to close the Modal when needed. Some of the methods to implement this functionality are,

- Add explicit ‘Close’ / ‘X’ / ‘Cancel’ button.
- Support clicks outside the Modal Window to close it.
- Use keyboard accessible control (Escape key) to close the window.

2. Ensure users understand what they need to do, using a descriptive title.

### Give clear context on the Modal functionality using a proper title, indicating what’s expected from the user

Prioritize the content and size the window appropriately.

A Modal window must contain only the essential information and actions with a minimum number of sentences. If the content requires a scrollbar, it’s better to use a regular page instead of a Modal.

### Put the Modal window on focus

Some methods that can be used to highlight the Modal window are as follows.

- Put the Modal directly in the user’s line of sight. It’s better to position the Modal at the top half of the page.
- Ensure that the Modal is visually distinct from the background page. As shown in the above figure, darkening the window’s background will help the user understand the Modal is located above the parent content and cannot interact with the parent content.

### Avoid nested Modals

To avoid visual complexity, it’s always best to prevent Modals that trigger another Modal window.

## Building Modals in React

In React, the whole application is treated as one large component with many child components. Therefore, components can be deeply nested even in a simple application. This happens due to the way how the virtual DOM is structured. So, you might find it challenging to render modals conventionally even with the help of some CSS tricks.

However, with the introduction of [Portals](https://reactjs.org/docs/portals.html) in React 16, we can easily render modals into a DOM node outside the parent component’s DOM hierarchy.

Here is how to implement a simple modal window in React using Portals and some best practices to enhance the UX.
![modals-3.gif](https://res.cloudinary.com/layercode/image/upload/v1636906775/modals_3_c5c10feb06.gif)

Here is a quick rundown of the above screenshot.

1. **Modal.js** — File containing the modal component.
2. **App.js** — File containing the main App component from which will call the Modal
3. **Modal.css** — File containing the styles applied to Modal


Here is the implementation code for `Modal.js`: 

```javascript
import React,{useEffect} from "react";
import ReactDOM from "react-dom";
import '../Modal.css';

const Modal =props=>{
  
    const closeOnEsc = (e) =>{
        if((e.charCode||e.keyCode)===27){
            props.close();
        }
    }

    useEffect(()=>{
        document.body.addEventListener('keydown',closeOnEsc);
        return function cleanup(){
            document.body.removeEventListener('keydown',closeOnEsc)
        }
    },[])
    
  
    return (
      props.open? ReactDOM.createPortal(
        <div className = 'modal'>
            <div className = 'content'>
                <div className = 'modal-header'>
                    <h4 className = 'modal-title'>Modal component</h4>
                </div>
                
                <div className = 'modal-body'>
                    Add the content here
                
                </div>
                <div className = 'modal-footer'>
                    <button onClick= {props.close}>Close</button>
                </div>
            </div>
             
        </div>,document.body):null
    );
  }


export default  Modal;
```

This functional component takes two props:

1. `open`— Indicates whether to render the modal.
2. `close` — Hides the modal by invoking the `handleClose()` function in App.js.

Here is the styles used for `Modal.css`. This is the basic layout and for demonstration purposes only.

```javascript
.modal {
  background-color: rgba(0,0,0,0.5);
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
 
 
}
.content {
  width: 500px;
  background-color: white;
  padding: 20px;
  border: 2px solid black;
  border-radius: 20px;
  margin: auto;
  text-align: center;
}

.modal-body{
  padding: 10px;
}
```

The Modal component can be used within `App.js` as shown below.

```javascript
import { useState } from 'react';
import Modal from './components/Modal';

function App() {
  const [open, setOpen] = useState(false);
  function handleClose(){
    setOpen (false);
  }
  function handleOpen(){
    setOpen(true);
  }
  return (
    <div className="App">
     <button className="button" onClick={handleOpen}>Open Modal</button>
     <Modal open = {open} close = {handleClose}/>
    </div>
  );
}

export default App;
```
Now, you have a simple, reusable Modal with minimal code and no required dependencies.

## Alternative Libraries for React Modals

Implementing the basic functionalities of a Modal is relatively straightforward. But it can take a bit of effort to enhance the UI and UX if we implement them from scratch. Fortunately, there are plenty of libraries that can help you to build better UIs with customizations. Here are three that you can use instead of building your own.

### 1. Dialog component from Material UI

MUI [dialog](https://mui.com/components/dialogs/) provides implementation guides to a wide range of Modals. They vary from basic Modals with less content to Modals requiring user inputs and different transitions.

![modals-5.png](https://res.cloudinary.com/layercode/image/upload/v1636906775/modals_5_8a73abb834.png)


They are also easily customizable as per the functional requirements. The well-written [documentation](https://mui.com/components/dialogs/) provides examples for some of the most common Modals, making the developers’ work much more manageable.

### 2. react-modal-video

We can render and display videos inside a modal component using the [react-modal-video](https://appleple.github.io/react-modal-video/) package without navigating to a separate page to view the video.

The video sources supported are YouTube, Vimeo, custom resources and can be configured for native video playback functionalities. In addition, the Modal can be configured for various animation transitions and is accessible for keyboard navigation and screen readers.

![modals-06](D:\GitHub\the-work\01 Clients\Damien\Edits\Enlear\01\modals-06.gif)
![modals-06.gif](https://res.cloudinary.com/layercode/image/upload/v1636906778/modals_06_9161e12f6a.gif)

### 3. Rodal

[Rodal ](https://github.com/chenjiahan/rodal)is one of the few open-source React Modals with a focus on animations. It supports nine different animation types and a list of props inclined towards controlling the animated behavior, such as the duration.

![modals-07.gif](https://res.cloudinary.com/layercode/image/upload/v1636906777/modals_07_269aee70e9.gif)

## Wrap up

Modals interrupts the user flow and demands attention. While they are great for compulsory tasks such as logging in again after an expired session, they should be used with care and sparingly. Too many modals can end up annoying the user and build up a negative user experience. 

How modal dialogs work and how to add them to your React app

Aphinya Dechalert

At the foundation of every web app, there is a collection of JavaScript frameworks and libraries. [Angular](https://angular.io/), [React](https://reactjs.org/), and [Vue](https://vuejs.org/) is the most talked-about and used JavaScript structures currently deployed across different types of projects, businesses, and organizations.

While at its core, Angular, React, and Vue is essentially JavaScript, vanilla JavaScript is not the easiest to deal with when views and frontend data management start to grow. In a nutshell, Angular, React, and Vue offers a structured way to communicate code between developers, organize views, and connect them up in a manageable and repeatable process.

# Let's start with Angular

Angular as we currently know it started out its life as something completely different. The structure, the cohesion, and the way things communicate with each other looked more like React in design with its own distinctive Angular-esque `{{curly brackets}}`.

Two-way binding used to be available until developers learned the hard way that multi-directional data communication is hard to manage over time. As the application and its data grew, so did the complexity and potential nodes of support that needs to be monitored. In the current form of Angular, they've adopted unidirectional data binding, which means that data can only be inherited from a parent-to-child direction and not the other. 

In addition to this, a module's separation of concern is split between three different files - the module, the HTML, and the CSS. This means that data, its logical processes, and views are physically separated. 

# What about React?

React has exploded in popularity over the years. In part, it is a lot easier to pick up than Angular. When it comes to React, the setup is minimal and each component is contained to the smallest visual and functionality set possible.

Then it just becomes one big jigsaw task of composing your views and linking up everything via `props` injections. While you can do this in Angular, the way React is structured makes it much easier for beginners and veterans of code to perform. 

From an implementation point of view, React is easy to pick up, integrate into current projects, and highly modular - if it is correctly written.

Unlike Angular, where structure is required and pre-baked into the framework, React's freedoms do come with a series of costs. New developers (especially those who are also new to code in general) are more likely to create tightly coupled architectures. Data management and code modularization can easily be abused. 

Despite this, the ecosystem of React developers is also growing at a faster rate due to the number of starter free courses pushed by major code learning spaces such as Free Code Camp, Code Academy, and HarvardX. As a result, more developers are talking about React, resulting in more resources due to the strong and constantly growing community. With over [2 million GitHub repositories](https://github.com/search?q=react) that are related to React in some form, React is bigger than [Angular (840k)](https://github.com/search?q=angular) and [Vue (644k)](https://github.com/search?q=vue).

# Where does Vue fit in with the Angular vs. React debate?

Vue is an interesting one. In a way, it can be seen as a fork of Angular.js, pruned and trimmed to only contain the good and favorite bits. It came out three years after Angular.js' debut and three years before Angular's architectural framework rewrite.

Over the years, it has grown into its stand-alone JavaScript framework sued for building user interfaces and single-page applications. Syntactically, it is very much like Angular.js but with better scoping controls and easier routing implementations. Templating is achieved through a series of components that can be modularized and injected with properties for data sharing and flow through.

It is much more lightweight than Angular but a little beefier than React when it comes to size. In part, this is because React is a library with a focus on UI rendering rather than data management. Similar to React and its relationship with Redux, Vue also has a flux-inspired centralized state management system called Vuex. The most challenging aspect of frontend development is maintaining the growing data needs by applications and their functionalities.

# Which framework/library should you use?

React is popular because it's easy to pick up and robust to use. However, Angular and Vue should not be disregarded as they both have their technical merits. 

To decide which framework or library you should use for your project, there are a few things that need to be considered:

- **size of community for ongoing support and learning resources**
  - React has the biggest community, followed by Angular, and then Vue. 
- **speed of delivery required** 
  - Angular has the biggest learning curve because it is a full framework that comes with a kitchen sink full of pre-written modules, extensions, and add-ons. React is minimal in terms of bundled APIs but has a strong open-source community. Vue is highly supported, despite it being the smallest in the comparison.
- **current team knowledge, strengths, and weaknesses** 
  - This is possible the deal breaker. If your team are Angular developers, then it might make sense to stick to Angular. If your team is an ad-hoc eclectic collection of skills, React or Vue may be the better option due to the smaller learning curve. Angular requires time investment to learn. React and Vue requires structural discipline, which can work well for seasoned developers who have strengths in other programming languages such as Java and C++.

Over time, as developers, we also become biased towards what we know. It doesn't hurt to dive into alternative frameworks and libraries. At the foundation of most frontend frameworks and library is JavaScript. Methodologies and ideas can be cross-pollinated for a more robust implementation of your app. The more you know, the easier and faster it is you can create connections based on your features and app requirements. 

  Angular vs. React vs. Vue - A Quick Look

Charuka Herath

Atomic design is a collection of visual assets that are created with modularity in mind. Imagine if you have to develop all the components from scratch each time. Atomic design lets developers use existing elements to quickly bootstrap together interfaces and works well in a React setting because it is intrinsically atomic by design through component-based modular constructions. 

## React, visual structure & implementing Atomic Design 

*Atomic Design* breaks down a page into five different layers - atoms, molecules, organisms, templates, and pages. It was initially created by [Brad Frost](https://bradfrost.com/blog/post/atomic-web-design/) and deals with creating visual structure through design systems. This methodology works well with React's modular approach by enforcing clear separations of visual elements and their associated component. Here is a quick introduction of what each component of Atomic design is and how they fit into your React app.

-  **Atoms**  are principal elements like buttons and labels. They are the smallest elements in your app and cannot be further reduced.

- **Molecules** are a group of *atoms*. For example, a *search bar* is a collection of atoms that are visually linked together.  

- **Organisms** are compositions of Atoms and Molecules that build a complex and distinct component with unique behavior. They can be seen as distinct parts of your application such as a footer or header area. In React, components can have their own state management, invoking APIs to fetch data.

- **Templates** are reusable sets of *Organisms* put together with *Molecules* and *Atoms* for higher-level layout reuse. 

## Using Atomic design as a guideline for your React app

We can use Atomic design principles to organize our project. Here is an example:

```
components/
├─ atoms/
│  ├─ submitButton
│  ├─ textInput
├─ molecules/
│  ├─ searchBar
├─ organisms/
│  ├─ header
│  ├─ footer
├─ templates/
│  ├─ blog
├─ pages/
│  ├─ home
│  ├─ blogs
```

Using Atomic design principles, we've divided our components into its various categories and compositions. Among these five, atoms, molecules and organisms belong to lower-level components, and templates and pages are considered higher-level components.

### Designing lower-level components using Atomic design in React

Based on the above file structure, we will be creating the following:

- **Submit Button** and the **Text Input** form components as Atoms.
- **Search Bar** component as a Molecule.
- **Header** and **Footer** components as Organisms.

```javascript
import {
  Button,
} from "react-bootstrap";
import styled from "styled-components";

const ButtonSumbit = styled(Button)`
  border-radius: 2vw;
  margin-left: 4vw;
  &:hover {
    background-color: blue;
  }
`;

function submitButton(props: any) {
    return (
        <ButtonSumbit
            type="submit"
            onClick={() => props.onPress()}
            style={{
                  width: props.w ? props.w : 85,
                  height: props.h ? props.h : 8,
                  marginTop: props.noMar ? 0 : 2,
                  backgroundColor: props.bColor ? props.bColor : '#fff',
                  borderWidth: 2,
                  borderColor: '512da8'
                }}
        ></ButtonSumbit>
    );
}
export default submitButton;
```

For the Molecule, we can design the **Search Bar** component using the **Submit Button** and **Text Input** Atoms.

```javascript
import React from "react";
import { Button } from "react-bootstrap";
import styled from "styled-components";
import submitButton from "../atoms/submitButton";
import textInput from "../atoms/textInput";

const searchArea = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function searchBar(props: any) {
  return (
    <searchArea>
      <ListGroup horizontal>
        <ListGroupItem>
          <textInput></textInput>
        </ListGroupItem>
        <ListGroupItem>
          <submitButton></submitButton>
        </ListGroupItem>
      </ListGroup>
    </searchArea>
  );
}
export default searchBar;
```

To create the **Header** Organism, we used the **Search Bar** Molecule and a List Component from React-Bootstrap.

```javascript
import React  from "react";
import { ListGroup, ListGroupItem } from "react-bootstrap";
import styled from "styled-components";
import searchBar from "../molecules/searchbar";

const blogHeader = styled.div`
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 20px;
  padding: 10px;
`;

function header(props: any) {
  return (
    <blogHeader>
      <ListGroup horizontal>
        <ListGroupItem>
          <p>Search Publications</p>
        </ListGroupItem>
        <ListGroupItem>
          <searchBar></searchBar>
        </ListGroupItem>
      </ListGroup>
    </blogHeader>
  );
}
export default header;
```

## Making higher-level components using Atomic design

Gradually the higher-order components can be defined using a combination of Atoms, Molecules, and Organisms. We can also develop sets of templates to design a full-page UI. According to this example, we can observe an ordered list of dependencies from the higher-level Page to the lower-level Atom.

It’s not mandatory to create a template for every use case. You can directly create a Page if it’s used only in one place. After developing the application, you can illustrate the dependency graph and check whether you have developed the application under the hood of Atomic design concepts.


Using atomic design to create visual cohesion for your React components

Theming in React can be complicated. As the project grows in size, so does the amount of visual variables you have to coordinate, manage, and maintain. Here are a series of tips and tricks that can be used to help keep your CSS under control in a React context. 

Theming using CSS variables is extremely fast for rendering. However, the number of variables and associated names can significantly grow as the project size increases. 

Here is an example of how to theme your React app based on CSS variables:

```css
body.light {
  --app-color-primary: blue;
  --app-color-primary-rgb: 0, 0, 255;
  --app-color-primary-contrast: white;

  --app-color-light: white;
  --app-color-light-rgb: 255, 255, 255;
  --app-color-light-contrast: black;

  --app-color-dark: black;
  --app-color-dark-rgb: 0, 0, 0;
  --app-color-dark-contrast: white;
}

body.dark {
  --app-color-primary: blue;
  --app-color-primary-rgb: 0, 0, 255;
  --app-color-primary-contrast: white;

  --app-color-light: black;
  --app-color-light-rgb: 0, 0, 0;
  --app-color-light-contrast: white;

  --app-color-dark: black;
  --app-color-dark-rgb: 0, 0, 0;
  --app-color-dark-contrast: white;
}
```

How can we make this a manageable process? a quick way is to set them up as a [React Context](https://reactjs.org/docs/context.html). 

What is React Context? It is a [React API](https://reactjs.org/docs/context.html) that lets you "pass data through the component tree without having to pass props down manually at every level." 


## Setting your CSS up in a JavaScript Object for React

Using the above example, we can add them as a context for React via a JavaScript object. Here is an example:

```javascript
//themes.js
const theme = {
  colors: {
    primary: {
      main: 'var(--app-color-primary)',
      rgb: 'var(--app-color-primary-rgb)',
      contrast: 'var(--app-color-primary-contrast)',
    },
    light: {
      main: 'var(--app-color-light)',
      rgb: 'var(--app-color-light-rgb)',
      contrast: 'var(--app-color-light-contrast)',
    },
    dark: {
      main: 'var(--app-color-dark)',
      rgb: 'var(--app-color-dark-rgb)',
      contrast: 'var(--app-color-dark-light)',
    },
  },
};
```



## Using your JavaScript object to theme your React app

Here is an example of how to use the above theme configuration as a JavaScript. 

```js
import { theme } from './theme';

const useStyles = createUseStyles({
  button: {
    display: 'flex',
    fontSize: '1rem',
    backgroundColor: theme.colors.primary.main,
  },
});
```

The `theme` object lives out of React, so theme switching triggers no re-renders - resulting in a more performant app. It also makes your CSS variables accessible with intelliSense, resulting in easier and better-referenced workflows. 

## Using the theme switcher hook with Jotai

While the above method makes adding CSS an easier process to your React app, the number of variables you have to maintain can grow to an unmanageable size. [Jotai](https://github.com/pmndrs/jotai) is a highly popular primitive and flexible state management store for React. [Jotai](https://www.npmjs.com/package/jotai) can be used to manage `localStorage`, switch theme states, and maintain the memory of them for the app. 

To install [Jotai](https://www.npmjs.com/package/jotai) as a module for your project, you can do so via `npm`:

```
npm i jotai
```

Here is an example implementation of Jotai. 

```js
import { atom, useAtom } from 'jotai';
import { useEffect } from 'react';

const browser = typeof window !== 'undefined';

const localValue = browser ? localStorage.getItem('theme') : 'light';
const systemTheme =
  browser && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

// The atom to hold the value goes here
const themeAtom = atom(localValue || systemTheme);

/** Sitewide theme */
export function useTheme() {
  const [theme, setTheme] = useAtom(themeAtom);

  useEffect(() => {
    if (!browser) return;

    localStorage.setItem('theme', theme);

    document.body.classList.remove('light', 'dark');
    document.body.classList.add(theme);
  }, [theme]);

  return [theme, setTheme];
}
```

Here is a breakdown of the code above. 

- First, we check if the code is running in a browser. This is done through `typeof window !== 'undefined';`
- Then we get the value stored in `localStorage`. If `localStorage` has the theme in it, then we'll consider it the highest priority. Our fallback default is `light`. 
- The `themeAtom` is our main store to hold variables for the current theme. We make this a local state using `useAtom`: `const [theme, setTheme] = useAtom(themeAtom);`Themes can be modified using `setTheme`.
- `useEffect` integrates the current theme with the CSS. 

`useEffect` runs whenever `theme` changes. When this runs, it checks if the code is running in the browser. If it isn't, it simply stops further execution by putting a `return`.

If it is successful, it goes on, and removes all the classes corresponding to our themes on `<body>`, then it adds the class corresponding to the latest value of `theme` variable.

Finally, we return the `[theme, setTheme]` pair as it is, so we can use it just like we use `useState`. You could also return these as objects `{ theme, setTheme }` giving them explicit naming.

Here is the TypeScript version of the above code:

```javascript
import { atom, useAtom } from 'jotai';
import { useEffect } from 'react';

export type Theme = 'light' | 'dark';

const browser = typeof window !== 'undefined';

const localValue = (browser ? localStorage.getItem('theme') : 'light') as Theme;
const systemTheme: Theme =
  browser && matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';

// The atom to hold the value goes here
const themeAtom = atom<Theme>(localValue || systemTheme);

/** Sitewide theme */
export function useTheme() {
  const [theme, setTheme] = useAtom(themeAtom);

  useEffect(() => {
    if (!browser) return;

    localStorage.setItem('theme', theme);

    document.body.classList.remove('light', 'dark');
    document.body.classList.add(theme);
  }, [theme]);

  return [theme, setTheme] as const;
}
```

React theming with CSS variables

Styling with CSS can be difficult to maintain as the app grows. With more visual assets to coordinate and keep track of, it's easy to lose selectors and create conflicting rules. Keeping organized can help reduce visual errors and ensure that your styles remain consistent. 

CSS structural frameworks are ways to keep your code organized through a series of standardization methods. Here is a quick rundown of 5 different CSS frameworks and methodologies to help you keep track of your styles, their application, and prevent conflicts in the future. 

# 1. CSS BEM methodology

[BEM](http://getbem.com/introduction/) stands for **Block**-**Element**-**Modifier**. It is a methodology that breaks down your visual elements into three parts - the block, the element, and the modifier.

A block is defined as a UI element that is self-contained. An element extends the block and is more specific in its application. A modifier is an overarching piece of CSS that has the ability to extend both an element and a block. 

Here is an example of a block:

```css
.btn {}
```

Here is an example of an element (extending `.btn`):

```css
.btn__price {}
```

Here is an example of a modifier on `btn`:

```css
.btn--orange {}
.btn--big {}
```

### Advantages of BEM

- You get scoping and relationships through the naming convention
- You get flexibility through the ability to extend visual features by stacking the selectors
- You still get specific applications of CSS for certain elements without impacting related classes

### Disadvantages of BEM

- The selectors can pollute your HTML with large and long class names. Here is an example:

```js
export const Card = () => {
  return (
    <section className="card">
      <img className="card__avatar" src="..." />
      <div className="card__info">
        <div className="card__info__title">...</div>
        <div className="card__info__description">...</div>
      </div>
    </section>
  );
};
```



# 2. SCSS (Sassy CSS)

[SCSS](https://sass-lang.com/), or Sassy CSS, gives developers the ability to programmatically create CSS rules with nesting to variables to make it less linear in its application. What this means is that developers have the ability to use references and inheritance rules that are more scoped and more akin to programming than single-level CSS rules. 

SCSS is a preprocessor, which means that you will also need to compile it separately and will not work on its own without it. 

Here is an example of what SCSS looks like:

```scss
.card {
  .avatar {}
  .info {
    .title {}
    .description {}
  }
}
```

Based on the example above, when compiled, the `.avatar` class will also inherit CSS from the `.card` class. 

### Advantages of SCSS

- Clean and readable
- Minifies better than BEM

### Disadvantages of SCSS

- Introduces an extra build step

# 3. JSS

[JSS](https://cssinjs.org/?v=v10.9.0) is a JavaScript CSS module for React that allows you to write all your CSS as JavaScript objects. Here is an example:

```js
import { createUseStyles } from 'react-jss';

const useStyles = createUseStyles({
  card: {},
  avatar: {},
  info: {},
  title: {},
  description: {},
});

export const Card = () => {
  const css = useStyles();

  return (
    <section className={css.card}>
      <img className={css.avatar} src="..." />
      <div className={css.info}>
        <div className={css.title}>...</div>
        <div className={css.description}>...</div>
      </div>
    </section>
  );
};
```

Instead of an external CSS file, the styles are actually an object created by `createUseStyles` function, and these styles live in the same file. This allows your related code to be collocated in one place. You simply use these styles as a hook in your `card` component or you can destructure classes from it and directly use them.

```js
export const Card = () => {
  const { card, avatar, info, title, description } = useStyles();

  return (
    <section className={card}>
      <img className={avatar} src="..." />
      <div className={info}>
        <div className={title}>...</div>
        <div className={description}>...</div>
      </div>
    </section>
  );
};
```

### Advantages of JSS

- All relevant styles co-located in one place
- Great for design systems
- SCSS like syntax


### Disadvantages of JSS

- Less performant. CSS being populated by JS rather than put into an external stylesheet can make the overall experience slower.

# 4. Goober

[Goober](https://goober.js.org/) is another CSS in JavaScript library for React that lets you create CSS objects for easier application for your app. Here is an example code snippet of Goober:



```js
import { styled } from 'goober';

const Button = styled('button')`
  border: 0;
  background: dodgerblue;
  span {color: white;}
  &:hover {
    background: tomato;
    span {color: black;}
  }
`;
```

Goober uses `styled()` to set the styling and its associated class name. Here is an example of a CSS object applied to a component. 

```js
import { styled } from 'goober';

export const AppCard = () => {
  return (
    <Card>
      <Avatar src="..." />
      <Info>
        <Title>...</Title>
        <Description>...</Description>
      </Info>
    </Card>
  );
};

const Card = styled('section')`
  /* Card styles */
`;

const Avatar = styled('img')`
  /* Avatar styles */
`;

const Info = styled('div')`
  /* Info styles */
`;

const Title = styled('div')`
  /* Title styles */
`;

const Description = styled('div')`
  /* Description styles */
`;
```

### Advantages of Goober

- Lightweight to integrate as it is only a 1KB library.

- Extract CSS into styled tags during build time for enhanced performance.

### Disadvantages of Goober

- Integrates the CSS as part of the app's JavaScript. This means that CSS sheets cannot easily be reused across different apps that may use the same styling. This can increase coding overhead if there are multiple apps involved. 

# 5. Linaria

Similar to Goober, [Linaria](https://linaria.dev/) uses a similar `styled-component` structure.  However, unlike Goober, Linaria compiles a separate CSS stylesheet and doesn't include itself in the final bundle. 

Here is an example code snippet of CSS with Linaria:

```js
import { styled } from '@linaria/react';

export const AppCard = () => {
  return (
    <Card>
      <Avatar src="..." />
      <Info>
        <Title>...</Title>
        <Description>...</Description>
      </Info>
    </Card>
  );
};

const Card = styled.section`
  /* Card styles */
`;

const Avatar = styled.img`
  /* Avatar styles */
`;

const Info = styled.div`
  /* Info styles */
`;

const Title = styled.div`
  /* Title styles */
`;

const Description = styled.div`
  /* Description styles */
`;
```

### Advantage of Linaria

- You can add your CSS inside your JavaScript files and have it extracted out into a separate stylesheet during the build process 
- zero runtime CSS in JavaScript

### Disadvantage of Linaria

- Linaria isn't fully compatible with all the build tools.

-----

CSS can make or break the visual experience of a user. The ability to keep track and maintain CSS has always been a problem for big projects. As interfaces increases in complexity, so do the number of rules that require maintenance. 

Keeping CSS organized and centralized is a work in progress for many projects. Hopefully one of the above libraries and CSS methodologies can help reduce the pain of stray classes and stylesheets. 

# Frontend

What are CSS Modules and how to use it in React

How modal dialogs work and how to add them to your React app

Angular vs. React vs. Vue - A Quick Look

Using atomic design to create visual cohesion for your React components

React theming with CSS variables

5 CSS methodologies and libraries to help keep your visual components organized