Top 4: CSS Mistakes to avoid as a newbie web developer (I made all of them at some point)
CSS is quite a challenge. If you are a web developer you have probably come to this conclusion at some point in your career, and if you are new to web development, then brace yourself. But this is not an article that goes on about the horrors of CSS, that topic probably requires two articles.
As a newbie web developer, you may be overwhelmed by the new information you are taking in and most likely you will make some cool websites but still be making some mistakes in how you write or structure your CSS code.
Without any more delay, let us get to the list.
Not using a reset file
“The goal of a reset file is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on.”
- Eric Meyer, Meyerweb.com
This single quote explains what exactly is included in a CSS reset file. Working on new projects as a newbie you might notice some tags like <p></p> have a default margin. Of course, you could just reset these in your CSS file but best industry standards recommend using a separate reset file. Do not be afraid however of adding or removing any styles in the reset.css file as this is meant to help you save time and work for your convenience. Read more about this here.
Not using selectors enough
As a new learner of CSS, you will quickly notice that for styling you will use class names rather than ids. This, of course, is the best practice, but when exactly is too much? Remember that CSS has a bunch of selectors such as child selector: E>F, sibling selector: E+F, attribute selector: input[type="text"], first-child pseudo-class: :first-child.
That are meant to make your code cleaner and save you the trouble of figuring out a new class name each time. But this is not a one size fits all type of thing. Learn how to use selectors here.
Specificity.
This is a personal favorite of mine. After a long day working on a project with my partner, we would run the lint tool on the CSS file and voila! Almost 100+ lines of errors, a majority of them reading the dreaded, no descending specificity, error. This personally happened to me in three projects until I finally decided to get to the bottom of what could be causing it.
A simple google search gave me the following answer for what is CSS specificity .
“Specificity is the means by which a browser decides which CSS property values are the most relevant to an element and therefore will be applied. Specificity is only based on the matching rules which are composed of CSS selectors of different sorts.”
Pretty straight forward right? Well not so much, In CSS the correct notation of specificity score takes a form that separates points by coma in an appropriate order. Knowing the values that Inline Elements, IDs, Classes have significantly improved my understanding of CSS specificity. The full tutorial on how to calculate those values can be found here.
Redundant Properties
As a developer one of the best things you can do is be lazy, seriously, you should. Repeating the same code over and over can seem pretty easy once you have CTRL+C and CTRL+V. But it is not really industry standard to have repeated blocks of code everywhere and that is why your code should always be D.R.Y. Aka Don’t Repeat Yourself. Have a look at the following code blocks.
#selector-1 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px
}.selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px;
}
Despite the fact that these two selectors are different, they are actually doing the exact same thing. The solution to this would be to use a single class name to represent these styles or use a combined format that looks like this.
#selector-1, .selector-2 {
font-style: italic;
color: #e7e7e7;
margin: 5px;
padding: 20px;
}Conclusion
As you can see there is a lot of things that you might end up doing wrong and that are very basic. I hope this article helps you to identify what areas you need to work on and improve on them. Happy Hacking!!
