Archi's Academy

GetStarted

GetStarted
Get in touch

Software Development

Software design

How to write good CSS

​ In my opinion, developers don't give enough attention to the CSS. CSS is of one the hardest concept in web development it takes hours of work to be good at CSS. ​

Why is the CSS important?

​ Because CSS allows developers to implement unique designs, animations, colors, fonts, etc. CSS the place that you can make your project unique. With a strong knowledge of CSS, your project or app will be attractive and much different than other projects from out there. Let's take check some tips for writing better CSS ​

1.DRY

Don't repeat yourself. In CSS sometimes we need to use the same code for different elements no need to write the same code for both of the elements we can create a main class and write our common CSS codes inside of the main class. ​

2. Don't use !important

When we use !important tag it will be the highest specificity so in the future when we try to change those !important CSS codes we will not be able to change them and our project will be full of !important codes. ​

3. Don't use IDs

We always try to keep our specificity low. So instead of IDs use classes. ​

4. Learn Flexbox and Grid

Flexbox and Grid is the best solution for layout problems. If you are not using it you are missing a lot. When you learned both of them you will see how much easy to create a layout for your design and position every element easily ​

5. Naming

Your class name should be unique and meaningful. when another developer checks your code. He/She should understand where this CSS code belongs. When we have a big project there are thousands of CSS codes so our class names should be unique otherwise there will be bugs. our legacy code or current code can be overlap different classes and lead to bugs. ​

6. Use shorthands

When we are writing margin, padding, etc. those properties can be write in one line if you have the 4 attribute of margin no need to write them one by one you can write like this margin: top right bottom left;

Archis-frontend-developer-trainee

Baris Babahan

Wednesday, Apr 28, 2021