Primer CSS is a free open-source CSS framework that is built with the 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 that the 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.
Lint Rules(WIP)?
When you write code with a lot of nesting, it will become a problem for other developers to enhance that code. So, it is recommended to use at most 3 levels of nesting.
The Lint Rules(WIP) are listed below:
- Nesting depth: This rule tells us to use nesting only till the depth of 3.
- Extends: You should avoid the use of extends keyword.
- Duplicated properties: You should avoid writing duplicate properties.
- Final new lines: You should use final new lines in your code.
- Hex length: You should write hex code for color till the length of 6.
- ID selectors: You should avoid ID selectors.
- Leading zero: You should use leading zeros.
- Naming format: lowercase-with-hyphens
- Property order: You should use the HTML property order.
- Selector depth: You should use nesting only till the depth of 3.
- Single line properties: You should use single line properties.
Example 1: In the below code, we will see what the nesting depth means. We have used a nesting depth of three and if we increase the depth then it will become complicated and you should avoid using more than three nesting depths.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<title>Primer CSS</title>
<style>
div section span {
color: blue;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div>
<section>
<span>GFG</span>
</section>
</div>
</center>
</body>
</html>
|
Output:
Example 2: In this example, we will make use of some CSS properties. We have used the CSS color property two times on the same element which will confuse other developers and the webpage will become slow while loading.
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<link rel="stylesheet" href=
"https://unpkg.com/@primer/css@^18.0.0/dist/primer.css" />
<title>Primer CSS</title>
<style>
div {
color:red;
}
div {
color:green;
}
</style>
</head>
<body>
<center>
<h1 style="color:green">GeeksforGeeks</h1>
<h3>A computer science portal for geeks</h3>
<div>
GfG
</div>
</center>
</body>
</html>
|
Output:
Reference: https://primer.style/css/principles/scss#lint-rules-wip