VOOZH about

URL: https://www.geeksforgeeks.org/css/primer-css-general-formatting/

⇱ Primer CSS General Formatting - GeeksforGeeks


  • Courses
  • Tutorials
  • Interview Prep

Primer CSS General Formatting

Last Updated : 23 Jul, 2025

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.

Primer CSS General formatting provides the various ways to write the well-formatted code by using the proper elements with attributes, that enhance the overall readability of the code, along with improving the user experience that helps to enhance the interactivity in the website. 

List of instruction for General formatting:

  • The first one is to use soft tabs with a two-space indent. Spaces are the only way to guarantee code renders the same in any person's environment.
  • You should use <p> element for writing paragraph and avoid using <br> element multiple times.
  • Items in list form should always be in <ul>, <ol>, or <dl> rather than using a set of <div> or <p>.
  • Make use of the <label> tag for writing any kind of text present in the form. 
  • Always make use of quotes around attributes for readability.
  • Avoid writing closing tag comments, like <!-- /.element --> because this will add to page load time plus, most editors have indentation guides and open-close tag highlighting.
  • Avoid trailing slashes in self-closing elements. Like <br>, <hr>, <img>, and <input>.
  • You can avoid writing tab indexes.

Example 1: In the below example, we will see the proper use of the <p> tag with attributes.

Output:

👁 Image
 

Example 2: This example describes the general formatting of the elements with attributes in Primer CSS.

Output:

👁 Image
 

Reference: https://primer.style/#general-formatting

Comment