15 CSS3 Best practices of  for beginners to pro.
Tags: css, codenewbie, webdev, html
Published: 2021-07-16 04:12:32

Whether you are a beginner or an expert in Frontend Development it is important to follow some best practices in order to keep your cascading style-sheet (CSS) optimized and organized. 

CSS guy is an artist, as an artist you should have some unique working strategy that’s make your action while working more enjoyable and fun. Here is some tips I share, you could follow and write your style as pro. Wow! let’s get started:

###01. Don't put everything in to one CSS file
**Case-01:** One large CSS file leads to fewer HTTP requests, 
which can improve performance.

**Case-02:** Several smaller file leads to easier organization 
which will make development and maintenance cheaper and easier.

Now what should our strategy for both scenarios? That’s a million 
dollars question. Okay let me clear your confusion; we can follow 
the win-win rules. 

“We could use multiple style sheets to keep things better 
organized, and then compress them into one file before putting 
them on the site, to improve performance.”


###02. Follow top-down approach for organize your stylesheet
You can follow your HTML elements hierarchy in your stylesheet. I called it top-down approach, that will help you to write more structured and organized code. You will find top-down approach very handy to find your expected code block form the entire stylesheet. 

![Follow top-down approach for organize your stylesheet](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l0x2sop2trqb0xa4sev0.png)

###03. Make UI components 
Tried to make some prebuild UI component that you may use in future just simply plug a class name and have some properties.


###04. Comment your CSS
For better readability and organized coding, code commenting play insane role. Code commenting helps code refactor in future and helps other developer to understand the project codebase. Code commenting is always good practice. Those developer who write code with proper commenting, have huge market value. 

![Comment your CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcs333jmtr7bzb5a300r.png)

###05. How to write consistent CSS
Consistent CSS is important for team collaboration as well as in large project. At the beginning part of the project you can set some rules for maintain throughout to your entire stylesheet. It will help you to write consistent CSS.


###06 CSS namespacing 
CSS namespacing helps you to create a structure that governs how CSS properties get written. If you follow the convention, you’ll be able to write CSS without being afraid of side effects. 
Here’s a list of namespaces I use:
1. .l-: layouts
2. .o-: objects
3. .c-: components
4. .js: JavaScript hooks
5. .is-|.has-: state classes
6. .t1|.s1: typography sizes
7. .u-: utility classes


###07. Use BEM or Block elements modifier

Have you worked on large websites that spans more than a few pages? If you did, you probably realized the horrors of not conforming to a robust CSS architecture. You probably would also have researched on ways to write maintainable CSS.

BEM convention is the good choice for well-maintained CSS architecture. If you’ve never heard of BEM before, it stands for block, element and modifier. It looks incredibly ugly when you first feast your eyes on it.

![Use BEM or Block elements modifier](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0yjsyzehh85suhy88jos.png)

I hated BEM to a point where I didn’t even give it a chance when I first got to know about it. I can’t remember what made me try BEM, but I realized how powerful it is to work with it.


###08. CSS class nesting or complex selectors 
Logically there is no problem with CSS class selector nesting but future will make sense. When you want to modify existing rules this will be a bit complex.There another main reason is when you use complex selectors browser takes more time fir match selectors.

Let me clear how browser trying to interpret selector and decide which element it matches. Lets related with an example. 

![CSS class nesting or complex selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/myobwont8uhr2jq74elg.png)

Browser start with the a tag, it will trying to match all the a tags then trying to match next selector then so on.

![CSS class nesting or complex selectors](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/odoea18q8pt8j4e2emnn.png)

It's not good practice to using tags as CSS selectors because it will try to match for every tag. Try to use more specific selector and reduce complexity.


###09. Use CSS preprocessor like SCSS, SASS and LESS
For keeping your CSS DRY(Don’t repeat yourself), use CSS preprocessor like SCSS,SASS or LESS. The biggest benefit to using these preprocessor is that you can define your re-usable code at the top and reuse it by @ include and @ extend throughout all of your CSS.

CSS preprocessor will make your life easier to write modular based CSS, it’s helps to write more organized and more consistent  cascading stylesheet. BEM naming convention with CSS namespacing and CSS preprocessor is perfect combo for robust CSS architecture.


###10. Reduce redundancy
Reduce redundancy a bit tough, you will not find both case are exact same. In my suggestion if find 70%-80% style match then you could use different class to outsource rest of 30%-20% style. I hope it will make sense.


###11. Vertically align any elements using only CSS
For vertically align any elements modern CSS introduce CSS flex and grid system. Those are awesome tolls for dynamically centered any elements.

By Flex: 
![Vertically align any elements using only CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k9qza6ttnhll2xno83y7.png)

By Grid: 
![Vertically align any elements using only CSS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xotv1wt9vgow0146hux.png)

###12. Try to use shorthand CSS properties
There is lots of way, you can ménage your style but try to stick with best approach. Always try to use CSS shorthand, it will reduce your code as well as give your stylesheet a nice and good looking shape. 

Bad Practice: 
![Try to use shorthand CSS properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sozcg8pukc06lfv4bc5r.png)

Good Practice: 
![Try to use shorthand CSS properties](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6gy5crc21eq9m295qxgb.png)

###13. Use rem’s or em’s
Using rem’s or em’s is more dynamic way instead of using pixels. Try to use rem’s or em’s rather than pixels.


###14. Avoid !important  
For avoid code collusion and if you don’t want to break normal flow of browser behavior with your CSS don’t ever use !important. It’s really hard to find-out conflict within !important and refactor the whole codebase in large scale application.


###15. Use mobile first development approach
A mobile-first approach to styling means that styles are applied first to mobile devices.
Concern with: 
1.Min-Width Media Queries
2.Progressive Enhancement (CSS & javaScript)
3.Content (Not Device Width) Determines Breakpoints

###Last Words

I hope you like my CSS3 coding guidelines and front end web development best practices. You can check my [15 Best practices of HTML5 for beginners](https://dev.to/menomanabdulla/15-html5-best-practices-for-beginners-to-master-47fb) for give your markup good shape. If you appreciate it or find any errors let me know in comments. Thanks for this journey & Happy Coding.