Hello. I'm Kojima from the Coding Factory Coding Team.
Last month, we published an article titled " Coding Factory's guidelines have been updated, " and this is the sequel to that article.
In our previous article, "What's new?", we listed the following changes:
2. Deletion of items that were previously specified in the guidelines but are no longer necessary
3. Class naming rules
This time, we will introduce 1 and 2.
By the way, after
In #03, a heated discussion took place about "3. Class naming rules."
In #04, we will talk about the revamped coding template based on the new guidelines.
#05: Summary and thoughts on the committee
We will introduce the above in the "Coder's Trivia" section.
1. [Newly added items in response to changes in the web environment]
The first thing you can't miss is
doctype defaults to html5, css defaults to css3
This is a very big change. Along with this, the explanations of major tags have been updated with the contents of html5 tags such as header, footer, and section.
The days when you just had to wrap everything in a div or span are over. I think the new guidelines will be a good help in creating a correct document structure.
Next,
Added viewport setting .
We are now in a mobile-friendly era, with an increasing number of websites that are compatible with multiple devices. Therefore, we have decided to describe the viewport even for PC websites.
Incidentally, two years ago we created coding guidelines for responsive web design, and most of the content from those guidelines has been incorporated into these current guidelines.
after that,
Vendor prefixes have been added. Although CSS3 has become the default, there are still some browsers that have not yet caught up with the support, and there are cases where the descriptions differ between browsers. These may be items that will be removed in the next update.
In addition to new items, many other items have also been changed.
for example…
Line breaks and indentation Comment rules
→ Changed in light of the current state of editors and developer tools
Font family
→ Carefully examine everything from font selection to font order
File naming rules Image export rules
→Device & retina compatibility
Grammar Check Method
→From Lint to W3C
And many more!
The contents of the new coding guidelines (a sneak peek). In addition to the rules, the guide also includes simple explanations, code examples, naming samples, and more to make the content easy to understand.
2. Deletion of items that were previously specified in the guidelines but are no longer necessary
When I looked at the deleted items again, I felt the age of the items.
for example,
Unless it is difficult to reproduce using CSS, avoid table coding that is not essential (for the purpose of layout).
Oh, the table layout! That brings back memories (distant look).
To begin with, do kids these days even know about table layouts or spacer.gif? That's a completely old-fashioned way of looking at things.
Email addresses are converted to entity characters and written.
There was a time when the @ symbol was considered villainous.
However, the collection technology used by email address harvesting robots continues to evolve, and these days simply turning them into entities is no longer enough to prevent them, so they are no longer of any use.
And it dominated the previous guidelines.
The descriptions of IE6&7 have disappeared entirely, but quietly.
IE8 only appears in the sections on css hacks and progressive enhancement, and is now treated as just a faint remnant of something left by people of the past.
Somehow, I felt a little sentimental.
Let's pull ourselves together and then,
The "Standard JavaScript Plug-in Collection " that was listed under the "Additional JavaScript Settings" section is no longer available. Tools change rapidly as the Web evolves. In order to use what is appropriate at the time, we decided to delete it.
lastly
CSS loading via @import has been removed.
At the time, I used to load all CSS files in the import.css file with @import for ease of understanding and management, but now preprocessors such as sass take over that role. Also, @import can only read files one at a time in order, which is a drawback (slows down the loading speed), so it is no longer needed.
Homework reports and meeting minutes stored in the coder team's technology sharing space (esa.io). In fact, I was more concerned with coming up with subtitles for the minutes than with compiling them.
There were a total of 21 meetings, and 16 homework reports were written.
[One grain is delicious many times]
As I worked on updating the guidelines this time, I was reminded that "regularly reviewing the content" also means "knowing what's happening now" in the web industry.
There were also some positive effects from holding this meeting.
- By thoroughly investigating and digging deeper into things that were unclear, I was able to deepen my technical understanding.
- Each coder was able to share their skills and ways of thinking, which led to aligning perceptions and raising the overall skills of the team.
From a team leader's perspective, this is a very good thing.
Why not take this opportunity to set up a guideline creation committee in your company? I'm sure it will be a win-win for your team!
KOJIMA Izumi