Caring about Code Standards
As a development team, we encourage each other to make contributions to our boilerplate code base. The boilerplate is simply a starting point for our projects with basic HTML, limited styling, and accessibility best practices. The boilerplate doesn't limit our creativity by imposing too much structure on a new project. Rather, it frees us up from repetitive tasks to really focus on the places where extra effort will have an impact on the finished site. You can take a look on GitHub: https://github.com/Fastspot/Boilerplate
We meet bi-weekly to share our proposed changes with each other. If we all agree, great! The change will be added to the boilerplate. If we do not agree, we have to talk out our reasonings. Sometimes these talks can become heated.
This is because WE CARE. We care down to the smallest detail. Much like we care about the visual details, we also care about the details that are behind the scenes. In a meeting just last week, we were debating whether or not to put a zero before a decimal. What makes more sense to you: “0.5s” or “.5s”? The argument was that: “.5s” is shorter to write, but “0.5s” is easier to read.
At the end of the day, we decided that our decisions are based around debugging. If something is easier to read, it’ll be easier to debug. This is important not only for yourself, but for the developer that comes in behind you. It will save you headaches in the end if your code is easy to read.
Code standards are not meant to box you in, they are meant to help you. Let’s use our CSS standards as an example. We write our styles in a specific order for readability.
The order you’re seeing here is:
- Mixins
- Dimensions
- Positioning
- Everything else, in alphabetical order
A fellow developer said to me “if things are not in this order, I will end up adding it on and then we have double styles”. This is because when you are bug fixing, you are moving so quickly. You expect things to be in a certain spot based on the standards.
Some other CSS standards are as follows:
- Include a space after the colon and before the value
- End in a semicolon
- Use double quotes
- Use leading zeros for decimal values, including in rgba()
- Add a single space between multiple comma separated values
- 0 values should not have units unless necessary, such as transition-duration
- Do not pad parentheses with spaces
It may seem trivial to make rules around something as basic as typing. But we like our code to be organized, detailed, clean, and easy to read. I spend a lot of my day singing the alphabet in my head in order to organize my CSS styles, but hey, if it saves time in the end, I am all for it.