Hello, this is Kanno from the Coding Factory.
This is the fourth installment of our series on formulating coding guidelines.
- The 1st Coding Factory guidelines have been updated.
- Part 2: Times change, standards change too
- Part 3: Towards a new era of CSS
- The 4th (this time) coding rental plate has also been renewed
- The 5th Confidence Guidelines are now available. (From the Chair of the Formulation Committee)
This time I would like to talk about the coding template, which has also been renewed in line with the changes to the guidelines that I mentioned in my previous post.
What are coding templates?
A coding template is a starter kit that includes HTML, CSS, and JS for new projects. It can be said to be an original framework of Coding Factory. At Coding Factory, most new projects start with this coding template. The aim of using coding templates is to standardize quality and increase production efficiency.
It has been in existence for about six years since I joined the company, and has been passed down through many upgrades to the present day, making it one of Coding Factory's greatest assets.
Update Flow
This was a major update to the guidelines, so we put a lot of effort into planning everything.
- I, Kanno, will create a draft based on an existing coding template.
- Maruyama, who has his ears glued to the latest trends, is here to check things out for you.
- Thorough checks by all coders
I had to go through this strict check. It was very depressing...
There are two points to be reviewed this time:
As I have explained so far, coding templates are in a sense a lifeline for the coders at Coding Factory. If we made something half-baked, the coders would beat us up, so after much deliberation, we decided to focus on the following two points when updating. ...Is this good?
- Applying new class naming guidelines to HTML and CSS
- Remove unnecessary items and make it simple and easy to use
1. Apply class naming to HTML and CSS in line with the new guidelines
This was a task of updating an existing template in accordance with the rules of the new guidelines, so it was not too difficult. As mentioned in the previous article , Towards a New Era of CSS - Formulation of Coding Guidelines #03 , the task was to fine-tune the structure while adding the designated prefixes to the class names. There was a lot of work, but there were not many elements that caused confusion, so it was completed without difficulty. Kanno-san, it was a breeze!
2. Remove unnecessary items and make it simple and easy to use
This was difficult... What people think is unnecessary and what they find easy to use are different for each person. If I think too much about it, I won't move forward, so for the time being, I just worked according to my own emotions, which were left to me.
To summarize roughly, it's something like this.
- The two previously separated css files (cmn_layout.css (layout & module) and cmn_style.css (general style)) have been merged into a single file called "base.css".
→ We have significantly reduced the number of general-purpose styles, so we decided to consolidate them. For example, we previously had margins and padding in increments of 5px up to 50px, but since most of them are not used, we decided to add only the necessary ones as they come up. - Reset CSS Renewal
→I deleted the reset that I applied to tags that I don't normally use, such as cite, dfn, and var. Also, since I started using the button tag a lot with html5, I made some changes to make it more practical, such as making it easier to customize the appearance. - Changed the description of the clearfix to "micro clearfix"
→The previous description was an old style that has been supported since IE5 and was quite cluttered, so we changed it to "micro clearfix", which is compact and clearer. - CSS descriptions for old IE have been deleted.
→It was deleted because there were remnants of support for IE6 and 7. - Apply "box-sizing: border-box;" to all elements
→When specifying the width, border-box allows you to calculate the width including border and padding, so it is more intuitive and easier to code. - Add a generic class for css3 animation
→I added .is-animate{transition: all 0.2s ease 0s;} to make it easier to specify animation movements all at once, such as when hovering.
*If usage is low, it may be deleted in the future. - Added a generic class for responsive display
→ Switch display:none; for each breakpoint. We added this because the number of responsive sites being created has increased. - Selection of common.js (basic functions such as smooth scrolling)
→ We have deleted JS that is rarely used, such as "pop-ups."
Looking at it all written out like this, it seems like there isn't much, but I worked carefully, giving careful thought to the order in which to write and how to include comments.
The finished product was then checked by the coders according to the flow, and we incorporated their suggestions for corrections, and were able to complete it successfully. Phew.
However, coding templates are never finished and they need to be continually updated to keep up with the ever-changing web industry.
Actually, I'm currently experimenting with updating my coding templates again.
Coding Factory's relentless challenges continue.
KANNO Shin