cft
Become a CreatorSign inGet Started

10 CSS Best Practises to better your code

Using Universal style guidelines in your work makes your code understandable and increases collaboration. Here are some best practises for CSS to help you write better code.


user

Nyartech

4 months ago | 2 min read
Follow

5-css-best-practises-clean-code-69mzu

It's always advisable to follow the style guide of the code you are working on. However ,there are standard universal guides that make code readable, usable and encourages collaboration.
Here are some I learnt about Cascading Style Sheets(CSS):

👎 shows you 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 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 in 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 CSS Best practises CSS on Google HTML and CSS style guide. All the best in writting better code.

Upvote


user
Created by

Nyartech

Follow

Freelancer

I write about Web development ,Freelancing and Life-hacks


people
Post

Upvote

Downvote

Comment

Bookmark

Share


Related Articles