Good practices you need in your front-end life
Written by Katia Rojas Sandoval and Laura Ferrando.
Life is hard in Adalab, however it would be even harder if we hadn’t learned some tips to improve our programming skills.
Here are some examples of good practices we have learned so far:
Take care of your body!
All browsers apply default CSS properties to most of the HTML elements. Wouldn’t it be awesome if there was a way to set some of these properties to the values you really want? The <body> HTML element is the place where all your content is going to be. This is where defining the base features, for instance, the site font, would make sense: you can set the font-family, font-size and color properties and every element contained in <body> will inherit the values of these properties. You will only have to change them in the specific elements where other styles are needed. And while you’re on it, you can also reset the <body> margins so that you don’t have a beautiful white frame surrounding your page. ;)
Click here to find out more about CSS inheritances.
Add CSS to your “friends list”!
It has happened to us all: we write down our perfectly well organized semantics and we define beautiful styles for our content. We load the live server in our coding software and… our HTML is naked like a newborn! We forgot to link our CSS file, or maybe we misspelled the file path, and our styles aren’t working. From now on, the first thing we’ll do will be to add a <link> tag in the <head> of our HTML, write down a HELLO WORLD and set the background color to bright pink before loading the live server to check everything’s working just fine. ;)
One line to rule them all!
One of the advantages of using a CSS preprocessor, like Sass, Less or Stylus, is the ability to create variables. Imagine you have the project finished and ready for production. Your colleagues from the design department arrive with last minute changes in the color palette. It’s a disaster: you have to look for every code line where you wrote down color: green and change it for color: pink. This wouldn’t be happening if you had defined a primary-color variable where you could be changing this color in one line. Now you know and it won’t happen again!
Mobile first!
Why is it a better idea? Let’s think of it the other way around!
What about finishing a magnificent desktop version where half of the technology it uses does not work on mobile phones? You would need to look at each of your code lines, detect and remove what does not work in order to get no errors. We both agree that the hardest part will be to detect what to delete.
It will always be a good idea to begin with the mobile version. Let’s say it’s easier to add than to remove. :)
Group all your media queries together!
It is always better to group all the media queries at the end of your CSS. That way,you will know which elements are being modified at each screen size. There is no need to look and detect the change at each element separately. You just need to look at the block code for each media query to understand where the change is made. Another positive aspect is that it decreases the quantity of media queries as you will use the same breakpoints.
Comment HTML and JS code
Working on a code you haven’t created is always a tough challenge. That’s why writing down comments, for upcoming developers or group partners, is extremely useful. It helps in understanding which element they refer to.
It also works for JS, as it shows the understanding of different functions.
Good practices do only have positive facts for you and your colleges. It saves a lot of time and helps everyone who sees these code lines to understand what they refer to. There are hundreds of thousands of front-end developers, let’s say it is quite hard for two of them to think the same way, so let’s just make it easier for everyone. :)
