Hello, this is Maruyama from the Coding Factory.
This is the third installment of our series on formulating coding guidelines.
Last time , we announced changes 1 and 2 to the following guidelines.
2. Deletion of items that were previously specified in the guidelines but are no longer necessary
3. Class naming rules
This time, I will talk about point 3, " Class naming rules ," which was the most heatedly debated point.
The purpose of changing the CSS naming rules
The environment surrounding the Web is constantly changing with the times.
The coding guidelines have also been updated with the times, with small tweaks being made as needed, but design philosophies and implementation methods have changed since the coding guidelines were first introduced, and coders on the ground were increasingly eager to do something about the CSS rules in the guidelines, with comments like, "Can't we do something about these naming rules?" and "It's going to be difficult to make changes and modifications to large-scale projects if we keep going like this."
A long and heated debate
CSS production rules can be said to be the "lifeline of a coder."
Everyone had strong preferences and requests, so discussions took a long time and meetings were held about 10 times, with the following opinions emerging:
- Do we need to change the Lower Camel method? It's difficult to do on a large scale project.
- I don't want to stick to one design philosophy ( OOCSS , BEM , etc.)
- I'm using a method that uses an id, but isn't an id not currently used to assign styles?
- Isn't it a good idea to use tag names, such as .ul_basic, as class names?
- Wouldn't it be better to customize the existing CSS design?
- If you use js, you want to put js at the beginning. Because you can separate js and style
- For separating long words use lower camels or underscores?
- It would be better to make it in parts
- The cuts are made in places that can be seen as parts, and the nesting is not made too deep.
- The idea is good, but we should also decide on a naming convention.
- Wouldn't it be better to think about it from an ideological perspective?
- I don't think we need to be so particular about the consecutive numbers at the end. That would make it more versatile.
- Some customers requested that the class names be given specific nouns rather than sequential numbers.
- Wouldn't it be better to choose specific names instead of sequential numbers?
- It is better to separate class names by role
- Wouldn't it be okay to use consecutive numbers for parts with variations?
- Too much freedom is not a good thing, so wouldn't it be better to have some restrictions similar to the current guidelines?
So we, the coders, decided to carefully discuss the details, mainly about the design philosophy (how to assign CSS classes related to the site design) and the class naming rules.
Coding Factory's new design philosophy and naming rules
The new Coding Factory's CSS design approach incorporates the best aspects of modern design philosophies such as OOCSS and SMACSS, which have recently become global CSS standards, and has been adjusted to suit our production.
The modular approach
In recent website design, the trend seems to be to group parts together according to their role as much as possible and use them in a general-purpose manner.
For this reason, we decided to call the parts divided by role "modules" and give them class names.
Specifically, the idea is as follows:
1. Modules that have meaning or characteristics (headings, text, lists, etc.)
For headings, separate them into headings (h1, h2, or a div surrounding h1, etc.), and for lists, separate them into lists (ul, ol, dl), and name them .ttl-XXX and .list-XXX respectively.
2. It consists of multiple elements, but they are likely to be used as a set.
Cut each set into enclosed parts and name the enclosing div .mod-XXX.
Add a prefix to each role
There are almost no "meaningless parts" on a website.
For example, a heading has the role of a "heading," and a clickable button has the role of a "button."
Add an appropriate prefix for the role. For example, for a heading, you would use ".ttl-level-01".
For details on the main prefixes, please see the guidelines.
Why you should prefix your modules
As mentioned above, if you follow the rule of assigning roles and adding prefixes, you can name classes semi-mechanically when working alone, which will speed up coding. Also, when working with multiple people, it has the advantage of being able to standardize class names to some extent, even out variations in individual coding skills and knowledge.
Also, if you assign a role to HTML by adding a prefix, even when you look at only the HTML source, you will see " <div class="btn-information"> ..."
When you see it, you can use the prefix "I see, this is a button. Hmm."
It also has the advantage that anyone can understand it in an instant.
The same goes for CSS; if you put all your code in one file, using prefixes can improve visibility.
summary
The strengths of the "New Guidelines/CSS Rules" are:
- The potential for faster coding
- To make it easier to direct coding by eliminating the need for individual class name thinking when working with multiple people.
- Improved visibility of HTML and CSS source
is.
We encourage you to take another look at your CSS design and naming and make better discoveries and expand your knowledge!
MARUYAMA TOMOYUKI
It's been more than ten years since I moved to Tokyo from a rural town in Oita Prefecture with a passion for the "Web" ..., I have almost entered the realm of a seasoned veteran but still learning every day. My appearance is starting to look like a veteran, so I'd like to lose weight and work on anti-engineering.