We, the coders at Coding Factory (CF for short) , usually strictly follow the guidelines, but also incorporate our individual skills and knowledge when coding.
He could talk for hours about the attention to detail and ideas that come up in his daily work.
So far, "Coding Methodology" has introduced the individual work methods and coding techniques of Coding Factory's coders.
This is the fourth installment, and we'll be changing things up a bit by presenting a discussion in which coders share their opinions on "where to leave margins."
To begin the discussion, we divided into the following teams:
At first, I tried to clearly divide the margins between sections and modules into "those who put them on top" and "those who put them on bottom", but
"But I use both. It's a hybrid."
So, I decided to divide it into "basically how to take it."
"Basically, I'm in the margin-top camp."
...When creating a page, you basically use margin-top to create space between modules, sections, etc.
Kojima, Matsubara, Nasu
“Basically, the margin-bottom group”
…Similarly, you basically add margin using margin-bottom.
Sugano and Maruyama
"Flexible"
...The decision will be made appropriately, taking into consideration various factors such as design.
Kato, Okamura, and Iwasaki
I want to end it neatly and self-contained.
The reason why people are in the "margin-top" camp
From the left in the front... myself, Tanaka, Kojima, Nasu, and Matsubara from the "upper group." Second from the left in the back... Kanno and Maruyama from the "lower group" and Okamura from the "flexible group."
-Those of you who are in the "margin-top camp" (hereafter referred to as "top camp"), what are your reasons for doing so?
Matsubara : IE8 does not support the :last-child pseudo-class (*1), so we use a top margin to take measures against browsers. For example, if it is a list, we set the margin on the <li> by setting margin-top:10px;, and then use :first-child (*2), which is also supported by IE8, and set margin-top to 0 on the very first <li> .
*2 :first-child pseudo-class: the first child element of its parent element. For more information, see :first-child - CSS | MDN
Matsubara's opinion: Add a top margin to the <li> and cancel the margin on the first <li>.
Kojima: If you put a margin below, for example, when one section becomes extremely long, it's a little hard to think about the margin between it and the next section. I want to know the margin just above this section. If you put a margin above, that becomes clear and it's easier to set up.
There is one exception: I try to place the headings below.
Matsubara : There is always something following a heading. There are times when an element other than a heading has no other elements below it. In that case, you don't need any space below the last element, so you can finish it neatly by leaving some space above it.
Kojima: It's self-contained. Each element is its own, and there is a margin between it and the element above it, so it's fine even if someone disappears at any time. Think about who that margin belongs to.
The argument of the "margin-bottom" school
--What about those of you who are in the "margin-bottom camp" (hereafter referred to as "bottom camp") ?
From left, center: Sugano and Maruyama.
Sugano: When I think about sections, it's not like I don't leave a margin on top either. I put sections on top and other modules below. When I think about "which module and where that margin is located," I think it's often on the bottom.
For example, I think the space below a heading should be ``the space below the heading'' and not ``the space above the element next to the heading.''
So, why place sections at the top? When you consider HTML5 sectioning*, if you nest sections, there is no space left below.
I think the important thing is, "Who has that space?"
Maruyama: When looking at a web page, I think the natural flow of the human eye is from top to bottom. If you do that, it's easier to think about and see when you add more and more parts below if you simply leave some space below the elements. However, that doesn't mean I never leave any margin on the top. When using adjacent selectors (*), one of their characteristics is that CSS only works on the elements below, so in those cases I use margin-top.
Here on the "Monosasu Site"
How would you create space?
Kanno: I think it would be easier to talk if you could show us some designs.
-So let's go to the article page of the Monosasu site.
"Coding Methodology" Part 2: Maruyama's "Let's create common patterns using the ::before and ::after pseudo elements."
-What do you think about this part?
A link module to the "next day's" article at the end of the article page. From here, the discussion turns to how to allocate the margins of the three lines in the red frame...
Kanno: Is the blank space below "2015.12.08" also blank space owned by "Osaka Office"?
Matsubara: That's right. The lower school puts it under the date.
Sugano: I think it would be better to add a margin below and use :last-child to process everything in the last "Work and Life" section. Why are the headings below but the others above? I think it would be better to standardize that.
Matsubara: I think what's important is not "who does that white space belong to" but "what meaning does that white space have?" and what the design is trying to express by having that white space.
For example, if you use "2015.12.08", you need to leave some space if there is an element following it. But if it is a standalone element, you don't need any space in the first place.
I thought it was margin that didn't need to be written into the CSS in the first place.
Kojima: There is also the issue of versatility. If there are two consecutive titles with the same name, you can add the same class to both titles to get the same margin above. But if you add a margin below "2015.12.08", you'll have to add a separate margin below "Osaka Office".
I have illustrated Kojima's theory. If you take the margin above, you only need one class (①), but if you take it below (②), you need at least two.
So, I think it would be more versatile if there was a margin on top.
I think it would be fine to uniformly cancel it out by using ":last-child", but I'm not sure how effective that would be.
It is important to standardize depending on the case
- The discussion is getting heated. What did those of you who joined recently think when you heard your seniors' discussion?
Okamura : I felt that everyone had clear internal rules for coding, even when it came to something as small as margins. I didn't think I had set any rules, but I basically leave margins at the bottom and also at the top as appropriate, so I thought maybe I had some internal rules too.
- What about Kato and Iwasaki?
Kato : I haven't decided yet. I'll go with what everyone wants.
(Everyone laughs)
Iwasaki: I also follow the lead of the project. When Nasu-san was the leader of a project, I was instructed to "put all the margins on the top," so I did the same.
Even if I think this is me now, if I'm told to do so by someone above me...
(Everyone laughs)
So Sugano is actually a lower-ranking player?
Iwasaki : Yes, sections and modules have a margin at the bottom. However, if there is a series of text such as <p> within it, the appropriate margin will be created just by lining them up, so I try to leave a margin at the top.
But when asked, "Are you in the upper group or the lower group?" I'm not sure. I use both...
Nasu : But that might be the best option. In the designs we receive from clients, the outer elements such as <section> often have a pattern to their layout, so we add a margin below and process them with :last-child.
However, the arrangement of the elements within it may not necessarily follow any pattern, so I thought it would be safer to add a margin at the top.
Block elements that surround the outside, such as <section>, are aligned with the same margin in most designs, so we use margin-bottom. Elements inside, such as <p> and <ul>, have different margins depending on their location, so we use margin-top.
NasuWhen you add a margin on top , you use :first-child, and when you add a margin on the bottom, you use :last-child to process the extra margin. But if you add an element above or below it, neither of these methods work well. ... Both have their pros and cons.
However, I think it might be better to unify them into one or the other.
Kanno : It's difficult to standardize completely, but when working with multiple people, it's good to decide whether the "base" for taking margins when coding is high or low.
The designer controls the coder?!
Matsubara: I think there are some designers who are considered to be of the lower class.
For example, the margin between the <p> and the "Related Information" box that appeared a while ago was set to 10px to match the <p>. In such cases, I think "Maybe it's better to set it like that," and I'm in favor of the lower side.
Kojima : I'd like to ask a designer about that! When you design, do you try to leave some space at the top or the bottom? The designer's margin rules.
Sugano: Coders generally change it depending on the design...
Hmm? Maybe we're being manipulated by the designers!?
(Everyone laughs)
- The designer has everything in control.
It's Matsubara that's why we're so confused (laughs).
Kanno: I want to hear it right now. We'll go with it, but it doesn't matter to us as coders, because we don't have our own style (laughs).
(Everyone laughs)
Nasu : No, that's not it.
We are coding professionals, so we can handle both.
Kanno: That's true.
Wow, that came together nicely (lol)!
(applause)
Conclusion
As a result, we ended up in an unexpected place: "Let's ask the designers what they do!"
Is it better to take "white space" at the top or the bottom? In the end, there is no answer, but that's okay.
Because there is no answer, I can pursue it. I can continue to think about it.
And you can bring your own best to your work.
This time I just listened, but next time I would definitely like to join in the discussion.
Now, what should we all talk about next?
TANAKA Natsumi