Important things to avoid in CSS
Learning the basics of CSS is really straightforward as compared to the common misconception in the market that it is easy to learn and tough to master.
Having said that — it’s also possible to ignore some common mistakes that developers make. Let’s check them out.
Don’t use generic class names
There will surely be errors if you are using generic names like .grid, .box, etc. For example — you want to apply CSS to product designing, then you may name it as product.grid instead of just .grid.
The problem will arise when you will import third-party stylesheets on your app which might lead to code errors. If you want to keep your class names short and unique, try adding a prefix to it.
Don’t use ID selectors instead of classes
All of you know that IDs cannot be reused. Right? An ID can be used by only one element on a single page. You must not use IDs for styling(with few exceptions).
Don’t over-use z-index values
I’ve seen developers over-using the z-index by using high values when trying to put an element in front of the other. What if another person needs to move another element up? This person will have to set an even higher z-index value. Isn’t it?
I recommend using it wisely and moderately, increasing the necessary amount to achieve the desired result.
Tip: Using a preprocessor like Sass or Stylus, will help you in handling z-index layers on your application smartly.
Check out my bestselling and highest rated ReactJS course on Udemy —
Mastering React With Interview Questions,eStore Project-2021
Don’t over-use inline CSS
Everyone will tell you, reusing is a good practice in life! (certainly, it is good in CSS too!)
Inline styles have a specificity that is higher than any external styling, So using class selectors is a better option over in-line styling unless it is unavoidable. So what to do instead? Always reuse CSS classes!
Don’t overuse the !important keyword
Why do we use this keyword?
Using !important normally means you’re trying to override some property with a higher specificity or you don’t want other team members/developers to be able to override a property that you’re setting.
Use !important wisely. If you/your team own the code containing the rule(s) that you’re trying to override, try refactoring it in order to use less specific selectors. Using another selector with the same specificity instead of !important is a smart thing to do.
Don’t keep too much specificity
Generally, the CSS properties/rules are applied and canceled i.e.,
most of the times — on a single element, multiple CSS properties are getting applied.
Write CSS in such a way making sure that- the elements do not receive multiple CSS rules and then they get canceled by the specificity/priority.
Don’t name inconsistently
When various developers are working on a single project, chances are that each one will use a different naming convention. Well, it can happen if you are working alone as well. Follow a single naming convention. In CSS, generally, we use lower case and more meaningful names will certainly help you to have multiple classes at a larger scale. Choose something that works well for the entire team and stick to it throughout.
About me:
Founder and CEO of an IT company in India, I have more than 24 years experience of in dealing with people, processes, and codes. I started online training for my students when it was not in fashion and have trained more than thousands of students/working professionals personally which has helped them to secure awesome jobs or even start their own business.
I am also been an active corporate trainer for several years now and have been consulting with top Fortune 500/1000 companies to streamline their development projects efficiently. My goal is to share knowledge with a primary focus on advanced tools & techniques, projects, and standard programming practices to help my students understand the basics and fundamentals and make awesome technological implementations.
