- how some front-end developers react when they hear css.
CSS is a web language and is used for styling the web/ markup and as a result can be complicated while using; in the case of styling the web certain mistakes her made which are common not only to beginners but senior developers as well and in this article, I will be talking about these fouls and ways to be a better css developer.
#CSS FOULS:
- Use of over complicated css selectors:
The HTML Code
The CSS Code.
The code snippets above are for a navbar that turns to a hamburger menu on a mobile screen. The CSS selectors are so complicated and can be done in a better way by making use of classes or :
. This rule is overlooked often times because it can be stressful making classes for everything but our main goal as developers to write codes that are readable and easy to understand.
- Make your CSS readable and organized:
The use of comments in codes are so important; not only are they helpful to others, they also do us a favor when we come back to review our code. I started actively commenting in my code late last year after a terrible experience I had when I came back to review a code and did not understand what a code was doing until after 15-30 seconds of thinking and going through my code twice.
Secondly, Organization. If you are not using a CSS Preprocessor like: Sass or Less then organizing your codes by using table of contents in your CSS which help you keep your sanity especially when you are using one stylesheet.
- Keep it DRY: DRY is an acronym for Do not repeat yourself and if you are wondering what I mean by repeating yourself, worry not because I will share a code snippet:
h1,h2 and h3 have the same font-weight and it is used three times which is a bad practice and the write way of doing it is by:
While building a website, one thing developers should have at the back of their minds is that anybody and anyone should be able to use their websites and the next two fouls will be dealing with this.
Text Contrast: The text contrast of our websites should not be low and this can be checked by using the devtools in chrome while hovering over a text. Texts with low contrast can make it hard for people to read with poor eyesight and that is not what we want after building a site.
Revolving the Outline in Buttons: Css comes with a default outlines when links, buttons e.t.c are selected and this outlines can be very ugly which is why some developers get rid of it by using the focus pseudoclass and this makes it worse for those that use tabs to move around a website because they will not be able to see what is selected. Instead, it is advised that after removing the default outline, your own styling should be used that will fit your taste.
This is the end of the article, if you stuck around make sure to leave a comment and if you want more articles on css, let me know in the comment section.