Primer CSS Lean Markup

Last Updated : 20 Jun, 2022

Primer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by Object-Oriented CSS principles, functional CSS, and BEM architecture. It is a highly reusable model.

The Lean Markup is a way for writing HTML in a more efficient way & making use of attributes rather than creating one more element. The use of too many elements that are not necessary, can make lengthy code & readability becomes difficult, along with taking more time to load. It is mainly used to write the code in a neat & clean manner with proper indentation, along with utilizing the elements in an efficient way that helps to reduce the overall code length, which in turn improves the overall readability & performance. For instance, consider the below code snippet:

<span class="avatar">
    <img src="link">
</span>

Here, we have used the <span> tag with a class as “avatar”, that contains the <img> tag. We can achieve the same result with the help <img> tag only, i.e. by declaring the class & image source inside the <img> tag, which can help to reduce the overall length of the code & also makes the efficient code, along with enhancing the readability of the code. The below code is much better than the above code snippet.

<img class="avatar" src="Link">

We will understand both concepts by implementing them through the example.

Example 1: This example describes the Primer CSS Lean Markup by implementing the first code snippet.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width,  
                   initial-scale=1.0" /> 
    <title>Primer CSS Lean Markup</title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css" 
          rel="stylesheet" /> 
    <style> 
        span { 
            margin-left: 190px; 
            width: 280px; 
            height: 250px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; 
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
      <h3 style="text-align:center;"> 
        Primer CSS Lean Markup 
    </h3> 
    <span class="avatar"> 
        <img src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"
             alt="gfgImg"> 
    </span>  
</body> 
  
</html>

Output:

Example 2: This example describes the Primer CSS Lean Markup by utilizing the elements in an efficient way, so that code becomes cleaner & enhances the performance.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8" /> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" /> 
    <title>Primer CSS Lean Markup</title> 
    <link href= 
"https://unpkg.com/@primer/css@^19.0.0/dist/primer.css"
          rel="stylesheet" /> 
    <style> 
        img { 
            margin-left: 200px; 
            width: 250px; 
            height: 250px; 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color:green; 
               text-align:center;"> 
        GeeksforGeeks 
    </h1> 
    <h3 style="text-align:center;"> 
        Primer CSS Lean Markup 
    </h3>  
    <img class="avatar"
         alt="gfgImg"
         src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png"> 
</body> 
</html>