10 CSS Best Practises To Better Code

There are rules on how code should be written varying from one programming language to another. Universal standard guides make code readable, usable , and encourage collaboration. Here are some I learned about Cascading Style Sheets(CSS):

👎 shows how you are doing it wrong. 👍shows the right way to do it.

1. Indent your block code

Write your code in blocks with indents that separate the selectors from the declarations makes the code look cleaner and clearer. Writing all your code in one line is confusing as it is unattractive.

Example:

👎
.title {display:flex; justify-content: center; }

👍
.title {
display:flex; 
justify-content: center; 
}

2. Use lowercase

Always use lowercase in your class names, ID's and HTML elements unless advised otherwise. Capitalizing some words and letters only complicates your code and might be problematic to other engineers working on the same code.

Example:

👎
.TITLE{
display:flex;
}

👍
.title {
display:flex;
}

3. Use meaniful names

Use class names that convey meaning of what the selector does. This makes it clear to the user what the code is for.Don't get carried away with cryptic names.

Example:

👎
.lona {
background-color:#fff;
}

👍
.graph {
background-color:#fff;
}

4. Avoid ID selectors

Use classes instead of ID's to style in CSS. Using classes makes it easier for the CSS selector to match therefore making the browser faster than when you use unique ID's and elements.

Example:

👎
#title {
position:fixed;
}

👍
.title {
position:fixed;
}

5. Place semi-colon after each declaration

In CSS place a semi-colon ;after each declaration. While semi-colons are not required in other languages like javascript , in CSS your code will not run without semi-colon ends.

Example:

👎
.title{
display:flex
}

👍
.title {
display:flex;
}

6. Space between selectors

Create space between selectors. Can be one line or two to make distinction between the two selectors.

Example:

👎
.title {
display:flex; 
justify-content: center; 
}
h1 {
color:#eee;
font-size:1em;
}

👍
.title {
display:flex; 
justify-content: center; 
}

h1 {
color:#eee;
font-size:1em;
}

7. Comment between sections

Write comments between sections to separate them. Comments can also be used to show the reader what the code is doing.

Example:

👍
/* Projects section */

.projects-section {

text-align: center;

padding: 10rem 2rem;

background: var(--main-blue);
}

/* Contact section */

.contact-section {
display: flex;
flex-direction: column;
justify-content: center;
}

8. Combine property values

Use shorthand to combine property values to reduce size of code. Example:

👎
.title {
margin-top:5px;
margin-right:10px;
margin-bottom:5px;
margin-left:15px;
}

👍
.title {
margin: 5px, 10px, 5px, 15px;
}

9. Combine properties

Just like values, some CSS properties can be combined to reduce bulk.A good example is flex-direction and flex-wrap are combined in flex-flow.

Example:

👎
.title {
flex-direction: column;
flex-wrap:wrap;
}

👍
.title {
flex-flow: column wrap;
}

10. Sequence according to HTML

Write your code as it appears on HTML page step by step . This makes it easier for the reader to follow your code. Example:

HTML

👍
<main id="main">

  <h1 id="title">Dr. Norman Borlaug</h1>

  <p>The man who saved a billion lives</p>

  <figure id="img-div">

    <img

      id="image"

      src="https://cdn.freecodecamp.org/testable-projects-fcc/images/tribute-page-main-image.jpg"

      alt="Dr. Norman Borlaug seen standing in Mexican wheat field with a group of biologists"

    />

CSS

#main { 
margin: 30px 8px; 
padding: 15px; 
border-radius: 5px; 
background: #eee; 
}

h1 { 
font-size: 4rem; 
margin-bottom: 0; }
img { 
max-width: 100%; 
display: block; 
}

Learn more about CSS Best practises on Google HTML and CSS style guide. All the best in writting better code.