Forem: Nouran Samy

Render Tree View Recursively in React & GraphQL

Nouran Samy — Wed, 01 Dec 2021 19:09:12 +0000

If you want to render a multilevel Tree View Component in React dynamically not caring about how many levels there will be, so you will need to use Recursion.

If you need to know what recursion is, you should check out this link.

This article will be using the following packages:

Material UI => Tree View Component UI
GraphQL and Apollo Client => Fetch data from back4app database

Install Packages

npm install @mui/lab @mui/material @mui/icons-material @apollo/client graphql

Apollo Client Setup

In your index.js, you need to wrap your Components with ApolloProvider to be available in all you app.

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import {
  ApolloClient,
  InMemoryCache,
  ApolloProvider,
  createHttpLink,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";

// URI for graphql API on back4app
const httpLink = createHttpLink({
  uri: "https://parseapi.back4app.com/graphql",
});

const headersLink = setContext((_, { headers }) => {
  // return the headers to the context so httpLink can read them
  return {
    headers: {
      ...headers,
      // These keys are found when you create app on back4app
      "X-Parse-Application-Id": "<YOUR_APPLICATION_ID>",
      "X-Parse-Master-Key": "<YOUR_MASTER_KEY>",
      "X-Parse-REST-API-Key": "<YOUR_REST_API_KEY>",
    },
  };
});

const client = new ApolloClient({
  link: headersLink.concat(httpLink),
  cache: new InMemoryCache(),
});

ReactDOM.render(
  <React.StrictMode>
    <ApolloProvider client={client}>
        <App />
    </ApolloProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Prepare you GraphQL Queries

You now need to prepare the queries for the api you're using. I will be using the ContinentsCountriesCities Database on back4app which will provide proper nesting for this tutorial.

So the queries for the continents, countries and cities will be as follows (You can check the Graphql API playground in your app with docs about queries details)

import { gql } from "@apollo/client";

export const GET_CONTINENTS = gql`
  query allContinents {
    data: continentscountriescities_Continents {
      count
      results: edges {
        node {
          objectId
          name
          children: countries {
            count
          }
        }
      }
    }
  }
`;

export const GET_COUNTRIES = gql`
  query allCountries($continentId: ID) {
    data: continentscountriescities_Countries(
      where: { continent: { have: { objectId: { equalTo: $continentId } } } }
    ) {
      count
      results: edges {
        node {
          objectId
          name
          children: cities {
            count
          }
        }
      }
    }
  }
`;

export const GET_CITIES = gql`
  query allCities($countryId: ID) {
    data: continentscountriescities_Cities(
      where: { country: { have: { objectId: { equalTo: $countryId } } } }
    ) {
      count
      results: edges {
        node {
          objectId
          name
        }
      }
    }
  }
`;

The gql String literal provided by apollo client will help in the validation of your query against the main schema.

Tree View UI

We can use the basic tree view in material ui, but we need to give it custom content to handle the fetching of data on TreeItem click.

So our CustomTreeItem would look something like this.

import React, { useEffect } from "react";
import clsx from "clsx";
import { CircularProgress, Typography } from "@mui/material";
import TreeItem, { useTreeItem } from "@mui/lab/TreeItem";
import { useLazyQuery } from "@apollo/client";
import { GET_COUNTRIES, GET_CITIES } from "../../utils/Queries";

const CustomContent = React.forwardRef(function CustomContent(
  props,
  ref
) {
  // TreeItemContentProps + typename + appendNewData props
  const {
    classes,
    className,
    label,
    nodeId,
    icon: iconProp,
    expansionIcon,
    displayIcon,
    typename,
    appendNewData,
  } = props;

   // Extract last part from Typename key of node from graphql
  // Ex: Continentscountriescities_Country => Country
  const type: string = typename?.split("_")[1] || "";

  let lazyQueryParams = {};

  // Add lazyQueryParams according to type of node
  switch (type) {
    case "Continent":
      lazyQueryParams = {
        query: GET_COUNTRIES,
        variableName: "continentId",
      };
      break;
    case "Country":
      lazyQueryParams = {
        query: GET_CITIES,
        variableName: "countryId",
      };
      break;
    default:
      lazyQueryParams = {
        query: GET_COUNTRIES,
        variableName: "continentId",
      };
      break;
  }

  // Lazy query for getting children of this node
  const [getChildren, { loading, data }] = useLazyQuery(
    lazyQueryParams?.query,
    {
      variables: { [lazyQueryParams?.variableName]: nodeId },
    }
  );

  const { disabled, expanded, selected, focused, handleExpansion } =
    useTreeItem(nodeId);

  const icon = iconProp || expansionIcon || displayIcon;

  // Append new children to node
  useEffect(() => {
    if (data?.data?.results && appendNewData) {
      appendNewData(nodeId, data.data?.results || []);
    }
  }, [data]);

  const handleExpansionClick = (event) => {
    // Fetch data only once
    if (!data) {
      getChildren();
    }

    handleExpansion(event);
  };

  return (
    <div
      className={clsx(className, classes.root, {
        [classes.expanded]: expanded,
        [classes.selected]: selected,
        [classes.focused]: focused,
        [classes.disabled]: disabled,
      })}
      onClick={handleExpansionClick}
      ref={ref}
    >
      <div className={classes.iconContainer}>{icon}</div>
      <Typography component="div" className={classes.label}>
        {label}
      </Typography>

    </div>
  );
});

const CustomTreeItem = (props) => {
  return (
    <TreeItem
      ContentComponent={CustomContent}
      // These props will be sent from the parent
      ContentProps={
        { typename: props.typename, appendNewData: props.appendNewData } as any
      }
      {...props}
    />
  );
};

export default CustomTreeItem;

It uses the queries we made above and with the useLazyQuery hook from apollo client, we have a method getChildren() (or any other name) to be called wherever and whenever we need in the component. So we are calling this method on the handleExpansionClick method and checking if the data is not already fetched.

And we are switching the type of the node we are rendering to decide which query to call in the hierarchy.

Now for the parent component of rendering the tree, It will render the continents data by default on first render and it will have the recursive function that will append the new children data fetched into the main array. For this to happen, all of our queries should have a fixed structure as above.

The parent component will look something like this

import React, { useEffect, useState } from "react";
import { useQuery } from "@apollo/client";
import TreeView from "@mui/lab/TreeView";
import { CircularProgress } from "@mui/material";
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
import ChevronRightIcon from "@mui/icons-material/ChevronRight";
import { GET_CONTINENTS } from "../../utils/Queries";
import CustomTreeItem from "../CustomTreeItem";
import { getModifiedData } from "../../utils/Shared";

const Tree = () => {
  // Get all continents on first render
  const { loading, data: allContinents } = useQuery(GET_CONTINENTS);
  // Data to render all tree items from
  const [treeItemsData, setTreeItemsData] = useState([]);

  // Set treeItemsData with continents recieved
  useEffect(() => {
    if (allContinents?.data?.results) {
      setTreeItemsData(allContinents?.data?.results);
    }
  }, [allContinents]);

  // Add new data in its correct place in treeItemsData array
  const appendNewData = (nodeId, data) => {
    const treeItemsDataClone = JSON.parse(JSON.stringify(treeItemsData)); // Deep Copy

    // getModifiedData is the recursive function (will be shown below alone)
    const newData = getModifiedData(treeItemsDataClone, nodeId, data);

    setTreeItemsData(newData); // set the rendered array with the modified array
  };

  // Render children items recursively
  const renderChild = (node) => {
    return (
      <CustomTreeItem
        key={node.objectId}
        classes={{ content: styles.treeItemContent }}
        typename={node.__typename}
        appendNewData={appendNewData}
        nodeId={node.objectId}
        label={node.name}
      >
        {/* If children is an object with a count key > 0, render a dummy treeItem to show expand icon on parent node */}
        {node.children &&
          (node.children.count > 0 ? (
            <CustomTreeItem nodeId="1" />
          ) : (
            node.children.length &&
            node.children.map((child: any) => renderChild(child.node)) // Recursively rendering children if array is found
          ))}
      </CustomTreeItem>
    );
  };

  // Show a loader until query resolve
  if (loading) return <CircularProgress />;
  else if (allContinents)
    return (
      <TreeView
        defaultCollapseIcon={<ExpandMoreIcon />}
        defaultExpandIcon={<ChevronRightIcon />}
        sx={{ height: 240, flexGrow: 1, maxWidth: 400, overflowY: "auto" }}
      >
        {treeItemsData.map((continent: any) => {
          return renderChild(continent.node);
        })}
      </TreeView>
    );
  else return <></>;
};

export default Tree;

Now for the recursive function, It takes the following parameters: the original array, the node id to find and insert new data in it and the new data to insert.

This function was found here but was customized for our specific requirements.

/*
    Original Answer: https://stackoverflow.com/a/15524326
    @Description: Searches for a specific object in nested objects or arrays according to "objectId" key
    @Params: originalData => The original array or object to search in
             nodeId => the id to compare to objectId field
             dataToBeAdded => new data to be added ad children to found node
    @Returns: Modified original data
  */
export const getModifiedData = (
  originalData: any,
  nodeId: string,
  dataToBeAdded: any
) => {
  let result = null;
  const originalDataCopy = JSON.parse(JSON.stringify(originalData)); // Deep copy

  if (originalData instanceof Array) {
    for (let i = 0; i < originalDataCopy.length; i++) {
      result = getModifiedData(originalDataCopy[i], nodeId, dataToBeAdded);

      if (result) {
        originalDataCopy[i] = result;
      }
    }
  } else {
    for (let prop in originalDataCopy) {
      if (prop === "objectId") {
        if (originalDataCopy[prop] === nodeId) {
          originalDataCopy.children = dataToBeAdded;
          return originalDataCopy;
        }
      }

      if (
        originalDataCopy[prop] instanceof Object ||
        originalDataCopy[prop] instanceof Array
      ) {
        result = getModifiedData(originalDataCopy[prop], nodeId, dataToBeAdded);
        if (result) {
          originalDataCopy[prop] = result;
          break;
        }
      }
    }
  }

  return originalDataCopy;
};

It will return the modified array to be set in the state easily.

Sorry for the long code snippets but it is somewhat complex and I wanted to expose all of the code. Working with back4app database and graphql in react wasn't that clear in the docs so I wanted to provide these steps as well.

Hope this article will help someone implementing a similar feature.

React TinyMCE Editor with noneditable plugin

Nouran Samy — Wed, 25 Aug 2021 13:39:18 +0000

Trying to find a nice editor to integrate with in your application is not an easy task. You need a highly customizable package regarding both toolbar and main editor design.

I also had a feature to implement which needed some non editable (non deletable) text inside the editor wrapping the main content.

For this case, i decided to use TinyMCE editor which have many plugins including noneditable plugin(but still deletable). We will see the workaround for this issue in this tutorial.

TinyMCE is a free editor with some amazing opensource plugins but also contains some premium plugins that are not free.

To start with, we need to install TinyMCE react package.
npm install --save @tinymce/tinymce-react
You can find the Quick start guide in here

Next we will add the Editor Component with its main configurations.

The editor component looks like this

import React, { useRef } from "react";
import { Editor } from "@tinymce/tinymce-react";

const editorRef = useRef(null);
const handleEditorChange = (value) => {
    // value is in HTML format not text
    console.log(value);
};

<Editor
    apiKey="<API_KEY>"
    onInit={(evt, editor) => (editorRef.current = editor)}
    onEditorChange={handleEditorChange}
/>

You can get the api key with a free account. It is not mandatory but it will hide an annoying warning above the editor.

Let's start adding our configurations

<Editor
    ...
    init={{
          menubar: false, // remove menubar if not needed
          toolbar:
            "styleselect| bold italic underline | alignleft aligncenter alignright alignjustify", // add custom buttons for your toolbar
          style_formats: [
            { title: "H1", block: "h1" },
            { title: "H2", block: "h2" },
            { title: "H3", block: "h3" },
            { title: "H4", block: "h4" },
            { title: "H5", block: "h5" },
            { title: "H6", block: "h6" },
            { title: "Paragraph", block: "p" },
          ], // customize the styleselect dropdown in toolbar with only these
          branding: false, // remove tinymce branding
          resize: false, // disallow editor resize
          statusbar: false, // remove bottom status bar
          plugins: "noneditable", // add the noneditable plugin
          content_css: "material-outline",
          skin: "material-outline", // use the material ui theme
          height: 450, // Editor height
        }}
/>

We some what customized our editor. But we need to add the non deletable functionality for noneditable plugin.

For this we need to add initial value for the editor with our non editable content as html. The default css class for noneditable plugin is mceNonEditable.

So we're adding this class to our content and applying a function called on pressing backspace or delete button to check on these content and not delete them.

<Editor 
   ...
   initialValue=`<p 
       class="mceNonEditable">Non editable content 
      </p>
       <p>
       <br /><br /><br /></p>
     <p class="mceNonEditable">Non editable content</p>`
   init={{
     ...,
     setup: function (editor) {
            editor.on("keydown", function (event) {
              if (event.keyCode === 8 || event.keyCode === 46) {
                const currentLine = editor.selection.getNode();

                // Prevent deletion of non editable text
                if (currentLine.hasAttribute("data-mce-bogus") || currentLine.className.includes("mceNonEditable")) {
                  event.preventDefault();
                  event.stopPropagation();
                  return false;
                }
              }
            });
          },
   }}

The initial value attribute takes content as html string with mceNonEditable class. To add multiple non editable contents with space between them, you can use
tags as shown above. The setup handler checks for backspace and delete keys and prevent default behavior if cursor is on the line of the non editable content.

That's it. Now you have an editor with non editable content. You can change styles and add other features and many more. You can find more details from the docs

Hope this quick tutorial is helpful for anyone stuck with an editor and wants to get going fast.

Google Calendar Events with React

Nouran Samy — Thu, 17 Jun 2021 13:36:40 +0000

This article will cover the topic of viewing a full calendar in your React application and integrate with Google Calendar API to show events from your account.

First of all, we need a package that provides a full calendar UI. So we will Full Calendar Package. This package is very simple and has many features as localization, different views, theme customizations and more.

First steps would be to install the package in your react app and initialize an API_KEY and CLIENT_ID in your Google Console to use in Google Calendar APIs.

In your react component, Add the scopes needed by google calendar for user authorization and showing calendar events.

const SCOPES =
  "https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/calendar.readonly https://www.googleapis.com/auth/calendar.events https://www.googleapis.com/auth/calendar";

Multiple scopes can be added separated by spaces.

Second, you must add google Api script in your application on component mount like so

  const [events, setEvents] = useState(null);

  useEffect(() => {
    const script = document.createElement("script");
    script.async = true;
    script.defer = true;
    script.src = "https://apis.google.com/js/api.js";

    document.body.appendChild(script);

    script.addEventListener("load", () => {
      if (window.gapi) handleClientLoad();
    });
  }, []);

This last part ensures that the authorization popup will show only when script is fully loaded and google api is ready.

The handleClientLoad() function loads the Auth2 library.

  const handleClientLoad = () => {
    window.gapi.load("client:auth2", initClient);
  };

Th initClient() function will initialize the API client library and set up sign in state listeners.

const openSignInPopup = () => {
   window.gapi.auth2.authorize(
              { client_id: CLIENT_ID, scope: SCOPES },
              (res) => {
                if (res) {
                  if (res.access_token)
                    localStorage.setItem("access_token", res.access_token);

                  // Load calendar events after authentication
                  window.gapi.client.load("calendar", "v3", listUpcomingEvents);
                }
              }
            );
}  

const initClient = () => {
    if (!localStorage.getItem("access_token")) {
      openSignInPopup();
    } else {
      // Get events if access token is found without sign in popup
      fetch(
     `https://www.googleapis.com/calendar/v3/calendars/primary/events?key=${API_KEY}&orderBy=startTime&singleEvents=true`,
        {
          headers: {
            Authorization: `Bearer ${localStorage.getItem("access_token")}`,
          },
        }
      )
        .then((res) => {
          // Check if unauthorized status code is return open sign in popup
          if (res.status !== 401) {
            return res.json();
          } else {
            localStorage.removeItem("access_token");

            openSignInPopup();
          }
        })
        .then((data) => {
          if (data?.items) {
            setEvents(formatEvents(data.items));
          }
        });
    }
  };

Here we are using two types of methods for fetching events, The first using the logged in gapi.client instance and the other using the access_token stored.

When using the gapi.client, we are calling a callback function listUpcomingEvents() to get the events of the user.

const listUpcomingEvents = () => {
    window.gapi.client.calendar.events
      .list({
        // Fetch events from user's primary calendar
        calendarId: "primary",
        showDeleted: true,
        singleEvents: true,
      })
      .then(function (response) {
        let events = response.result.items;

        if (events.length > 0) {
          setEvents(formatEvents(events));
        }
      });
  };

Now that we have the events, we need to format them for Full calendar package event object structure.

const formatEvents = (list) => {
    return list.map((item) => ({
      title: item.summary,
      start: item.start.dateTime || item.start.date,
      end: item.end.dateTime || item.end.date,
    }));
  };

We are only showing title, start date and end dates but there are more options in full calendar docs.

At last, we need to render the Full Calendar component

import FullCalendar from "@fullcalendar/react";
import dayGridPlugin from "@fullcalendar/daygrid";

return (
      <FullCalendar
        plugins={[dayGridPlugin]}
        initialView="dayGridMonth"
        events={events}
      />
  );

Now we have a full calendar rendering google calendar events.

Hope this was a clear tutorial. Thank you and have a great day.

Safari/iPhone compatibility issues

Nouran Samy — Tue, 13 Apr 2021 14:39:18 +0000

I've been facing a lot of compatibility issues in safari that worked fine in other browsers. So i decided to put all of them in one place for reference.

1. Animations

I wanted to add a pulse effect to a rounded div so i animated box-shadow property like so:

.pulse {
  animation: pulse-animation 1s infinite;
  border-radius: 50%;
}

@keyframes pulse-animation {
  0% {
     box-shadow: 0 0 0 0px #00b2ba;
  }
  100% {
    box-shadow: 0 0 5px 12px rgba(0, 0, 0, 0);
  }
}

This worked fine but the box shadow animation was behaving unexpectedly in safari browser. I found out that the safe properties to be used in animations are opacity and transform. So i found a solution to use before and after pseudo elements and apply this effect using opacity and transform like so:

.pulse {
  position: relative;

  &::after {
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 100%;
    border: 5px solid rgba(0, 178, 186, 0.7);
    border-radius: 50%;
    animation-name: pulse;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}

@keyframes pulse {
  0% {
    opacity: 1;
    transform: scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(2.5);
  }
}

You can find the live example in here

2. Scroll bouncing behavior

Scroll bouncing (also sometimes referred to as scroll ‘rubber-banding’, or ‘elastic scrolling’) is often used to refer to the effect you see when you scroll to the very top of a page or HTML element, or to the bottom of a page or element, on a device using a touchscreen or a trackpad, and empty space can be seen for a moment before the element or page springs back and aligns itself back to its top/bottom (when you release your touch/fingers).

You can fix this behavior by giving body and html elements overflow: hidden and add a body wrapper element that has the following styles:

<head>
   <style>
        .body-wrapper {
            width: 100vw;
            height: 100vh;
            overflow-y: auto;
            overflow-x: hidden;
            position: relative;
            -webkit-overflow-scrolling: touch; // This 
            property could lead to bouncing of element 
            positioned as fixed
         }
</style>
</head>
<body>
    <div class="body-wrapper">
        // Your elements goes here
    </div>
</body>

You could refer to this link for other ways

3. Notch of new iPhones

The upper notch of new iphone devices could prevent your website from taking full width in landscape orientation if not handled properly.

You could prevent this scenario by adding this viewport meta tag to your head element

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

And add these styles

@supports (padding: max(0px)) {
  body,
  header,
  footer {
    padding-left: min(0vmin, env(safe-area-inset-left));
    padding-right: min(0vmin, env(safe-area-inset-right));
  }
}

These safe areas will guarantee you content to be shown no matter what the orientation is.

You could also refer to this link for more details

I tried to sum up all the issues i faced with safari or iphones while coding but this article will be updated with any other cases i will face.

Hope it helps someone.

React 3D Carousel with Swipe effect

Nouran Samy — Fri, 12 Mar 2021 18:40:51 +0000

Hello everyone. I've been working on a react project that needed to add a feature of a 3D carousel.

The package that i used was react-spring-3d-carousel. Everything was going great with the minimum requirements except for the drag or swipe effect of any slider or a normal carousel.

P.S, If you're using NextJS you will need to import the library as follows as it uses window object which is not defined in SSR

import dynamic from "next/dynamic";

const Carousel = dynamic(() => import("react-spring-3d-carousel"), {
  ssr: false,
});

But fortunately, I found a way to add this feature using Touch Events. And it is compatible with both android and ios.

First of all, this is the demo for react 3d carousel package that i used.

For the swipe effect, i used the answer i found on this stackoverflow question here.

All you have to do is add onTouchStart and onTouchMove events listeners to the div surrounding the carousel.

<div
   style={{ width: "80%", height: "500px", margin: "0 auto" }}
   onTouchStart={handleTouchStart}
   onTouchMove={handleTouchMove}
 >
      <Carousel
        slides={slides}
        goToSlide={state.goToSlide}
        offsetRadius={state.offsetRadius}
        showNavigation={state.showNavigation}
        animationConfig={state.config}
      />
</div>

And the functions used to detect the swipe direction are as follows:

  let xDown = null;
  let yDown = null;

  const getTouches = (evt) => {
    return (
      evt.touches || evt.originalEvent.touches // browser API
    ); // jQuery
  };

  const handleTouchStart = (evt) => {
    const firstTouch = getTouches(evt)[0];
    xDown = firstTouch.clientX;
    yDown = firstTouch.clientY;
  };

  const handleTouchMove = (evt) => {
    if (!xDown || !yDown) {
      return;
    }

    let xUp = evt.touches[0].clientX;
    let yUp = evt.touches[0].clientY;

    let xDiff = xDown - xUp;
    let yDiff = yDown - yUp;

    if (Math.abs(xDiff) > Math.abs(yDiff)) {
      /*most significant*/
      if (xDiff > 0) {
        /* left swipe */
        setState({ goToSlide: state.goToSlide + 1 });
      } else {
        /* right swipe */
        setState({ goToSlide: state.goToSlide - 1 });
      }
    } else {
      if (yDiff > 0) {
        /* up swipe */
      } else {
        /* down swipe */
      }
    }
    /* reset values */
    xDown = null;
    yDown = null;
  };

Simply, handleTouchStart just captures the first touch x and y point and handleTouchMove detects other movements and calculate the direction from the difference between the start and new point.

So to sum up, you can find the new 3d carousel demo code with the swipe effect added to it here.

And of course you can use the touch events on any other element or feature other than a carousel.

Hope it helps someone out. Thanks for your time.

OOCSS Methodology

Nouran Samy — Fri, 19 Feb 2021 11:56:24 +0000

OOCSS (Object Oriented Cascading Style Sheets) is concerned with converting your regular CSS styles to reusable classes. A CSS “object” is a repeating visual pattern, that can be abstracted into an independent snippet of code.

It has two major principles: Separate structure and skin and Separate container and content

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 two separately. For example, this snippet of CSS:

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

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

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

.button {
   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 as images, paragraphs, divs which are nested inside other elements that serve as Containers.

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 regular styling for a sidebar.

#sidebar {
    padding: 2px;
    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.

This methodology has some benefits and some disadvantages. The benefits could be:

Scalability and Reusability

The classes are in a global state that can be used in any project or application with minimum changes.

Readability

Other programmers can read your styles easily as there is no nesting or complications.

The disadvantages on the other hand could be:

Not suitable for small projects

This could be a headache to apply on a small project that has minimum styles and no complications in HTML structure.

Increases number of classes

As you can see above, to apply these principles we had to increase our classes to apply separation concept.

Conclusion

There are many methodologies for organizing your styles, but this one is very simple and can be used instantly as long as you keep these two rules in mind.