A. Front End is Easy
Coming from a back end background, my first priority when I was asked to do front end development was to get it done without thinking whatever I am doing right now should be feasible to a change in the future. My first thought was HTML structure doesn’t have any importance.
Later, I realised even extra lines/comments can give different meaning to the browser once I started using AngularJS or other frameworks like Grunt/Bower. Since HTML/CSS/JS doesn’t compile, debugging can be more difficult for backend developers. Closing html tags properly is a big issue for them. Since backend can throw a compile time error, they are not really concerned to check if something opened is closed. Since we are practised in that environment, sudden change to front end can lead to repeat the same mistakes.
As the browser wont show any error, developers will tend to move forward without realising the bug. It will take a while when we notice styling rules are not being applied in some places. If you notice weird style bugs, first check that all the elements are closed properly.
B. Name Everything
Reusability is a concept I used only in back end. As a continuation of my first false belief of “getting things done”, nothing bothered me to give class names/IDs for every single component without thinking about how to reuse the same classes for different elements. I believed each HTML element has to be considered as unique, and therefore gave separate class names and IDs. Nested selectors are something most of the back end developers are not aware of. It helps to a great extent to avoid naming each and every element.
Another point which most of the back end developers don’t understand is reusing classes. I wasn’t quite convinced. Why?
I rarely found two sections/elements that had common styling properties. One of them would have a different styling properties such as color, font size, margin, etc. So I used to think, ‘Why classes?’. Back end developers, here is the solution: We can have multiple classes in each element where a class defined in the right overrides the class in the left. So even if its a single property that is different from a class which is already present, just have a different class for that property and declare it in the right side of the class. This makes the code look cleaner.
Also, there are some CSS properties which you may find repeating throughout the application. eg: text align:center, font-weight:bold etc. Try to make special classes for those properties to avoid coding it over and over. These are known as helper classes.
Bootstrap is some framework which is used to give fancy colors and shapes. It took me some time to understand the power of the framework and ‘Why reinvent the wheel’. Bootstrap has saved me so much time in creating pop ups, pagination, tables, tab controls, carousels, etc.