What could be better than learning from real-time experiences, hence, I thought of jotting my coding experiences here. Like me, there might be many developers who get a fully developed project for small modifications(what we call fixes). So people assume that it won’t take much time for re-fixing the issues. But the fact is, that if you are a responsible developer you will put all your efforts in following things:-
- Find out the source of problem
- Is there any code already written for that problem(or similar)
- What you write should not affect existing things or cause a new problem
Every developer only consider #1 and works on it. And the remaining points are ignored.
And actually, these can be ignored because it doesn’t make any sense if the code is not reusable from the beginning. So it is acceptable to not waste the time in digging deep just to make a quick fix(patch) in half or couple of hours as assumed. And in this way our project becomes a collection of fixes or what we call garbage collection.
So the thing came up is-
“Write today, for future.”
Things we should keep in mind before writing code-
- It should be reusable
- It should be modifiable
- It should be understandable
Being a frontend developer I create the foundation of a project. Whatever code I write needs to be flexible enough to hold the user interface strongly in maximum possible situations(screen/device). And it should be easily understandable for any other person to work parallely or in future.
“Writing is an art, only if there is a meaning.”
To put meaning in my code I did some reseach and found some recipes to make my dish tasty. Those were-
- BEM Framework
- OOCSS Framework
- SMACSS Framework
I took few flavours from the all above and mixed them.
(Here I am not going to discuss about these frameworks are, because I can’t explain it better then them, already explained in their websites.)
Tips to share-
- Treat everything on your page as a block.
- Consider each thing as an element in a block.
- Use a modifier to differentiate two visually different looking similar elements.
- Always use a class for styling any element.
- Never use a ID to give a style
- Divide your styling if you are working on a pre-processor:
- _variables.file(where you keep all your variables)
- _base.file(where you set style for the basic structure a,font,body,html and other basic styling)
- _layouts.file(where you set the styling for all possible layouts for your project)
- _page.file(where you set styling for individual pages)
- _custom.file/shame.file/fixes.file(Where you add fixes or code for exceptional cases, try to write as much less as you can in this file because the code you have written in other files should be capable enough to handle exceptions.)
These were few standards I have made for myself to follow while writing code; standards are something which can help in understanding and also restrict us from making mistakes. Because by following standards you create rules which makes your game safe and clean.
Ending with a profound learning quote-
“A code without any standard, is like a language without grammar.”