You might think why another article about clean code when there are 100 articles and books about it?
Sadly you are wrong. Here I'm helping you clean the existing code smells and how to prevent adding new code smells to keep the code clean.
Before we dig into the main purpose of the document we need to understand what is the clean code and its benefits in summary.
What is the clean code?
Clean code is code that is not only functional but also easy to read, understand, and maintain. It adheres to best practices, follows a consistent style, and has minimal complexity. Clean code reflects the developer's commitment to craftsmanship and a deep understanding of the software's inner workings. It is code that a developer can be proud of, and that others can effortlessly pick up and work on.

 Advantages:

1.Enhanced Readability: Clean code is like a well-written novel. It's a pleasure to read and comprehend. When code is clean, anyone, from the original developer to a newcomer, can quickly grasp its purpose and functionality. This clarity fosters efficient collaboration within the development team. 
2.Reduced Bugs and Defects: Clean code reduces the chances of introducing bugs. When code is clear and follows best practices, developers are less likely to make mistakes. This, in turn, reduces the time spent debugging and testing, leading to more reliable software. 
3.Maintainability: Software doesn't exist in isolation; it evolves. Clean code is much easier to maintain and extend. When changes are needed, clean code allows developers to make alterations without the fear of causing unintended side effects or breaking the system. 
4.Improved Collaboration: Clean code is a universal language. It eliminates ambiguity and misunderstandings. When team members can rely on clean code, collaboration becomes more efficient. Code reviews are faster and more productive, and knowledge transfer among team members is seamless. 

so how do we manage this?😁 

Fortunately, there are several tools available to help developers write clean and maintainable code. These tools assist in code analysis, code formatting, identifying issues, and promoting coding best practices.

  • Code Analysis Tools: SonarQube ,EsLint

  • Code Formatting Tools: Prettier etc

When to Use Flexbox and Grid for layouts

Flexbox and Grid are powerful tools in CSS, but choosing the right one is like picking the right tool for a job. You wouldn't use a hammer to tighten a screw, right?😁 Let's dive in.

Flexbox: The Go-To for One-Dimensional Layouts

It's like a conveyor belt, it arranges elements in a single row or column, making them flexible and responsive.
Use Flexbox for: Navigation menus, buttons, and aligning items in a straight line.
Why? It allows elements to stretch, shrink, and distribute space efficiently.

Grid: The Best Choice for Two-Dimensional Layouts

Grid is like a spreadsheet, it gives you full control over rows and columns.
Use Grid for: Page layouts, dashboards, and structured designs that require precise positioning.
Why? It provides better structure and alignment for complex layouts.

A golden rule of thumb: Use Flexbox for components inside a container and Grid for structuring the entire layout of a page.

Why Semantic HTML is a Game-Changer

Would you rather read a book with well-defined chapters and headings or a random pile of text? That's exactly what semantic HTML does for web development - it provides structure and meaning to a webpage.
Why is it important that our HTML is semantic? Well, for example, when it comes to finding a page on the internet, search engines 'see' the page without styles and the only way to understand which elements are more important is through marking. That is, if we put the name of the page inside a

(paragraph) tag, it is likely to be lost in other content and not show up in the search engine results. But if we place it inside a (header 1) tag, the search engines know that they have to give it more importance.
Improve your SEO positioning: Search engines understand and rank semantic HTML better, improving website visibility by facilitating the task to the positioning algorithm helping us to reach more users. And in turn, our website will be more accessible.
Help your site be accessible: Screen readers rely on semantic tags like , , and to help visually impaired users navigate websites conveniently. So making sure that screen readers can read each element, and that each of them can be accessed through the keyboard is ESSENTIAL. We have to code for all users.
Clearer code and easier to maintain: this practice allows our code to make more sense, and to be closer to a natural language, where each element uses the adequate words. In addition, when a project grows, adding more pages and more lines of code, the presence of semantic tags helps us orientate ourselves.

Important semantic elements to use frequently:

  • for headers

  • for nav menus

  • for grouped content

  • for self-contained content

  • for page footers

Conclusion: 

Clean code, thoughtful CSS layout choices, and semantic HTML are the building blocks of high-quality web development Writing clean code saves a lot of time, choosing the right CSS tool makes layouts more efficiently, and semantic HTML ensures structure and accessibility.
By adopting these best practices, you'll create functional websites, future-proof, scalable, and also makes it easy to maintain. After all, great developers don't just write code - they write code that others can understand and build upon.