Make the source for the same title styling on different page more uniform

[thusc]

I'm looking at the main title on these pages:

• https://design.smart.coop/development/browser-support.html
• https://design.smart.coop/blog/index.html
• https://design.smart.coop/blog/2021/10/08/smart-announces-an-open-design-system.html

They look all the same and placed at the right position (which is of course very nice).

Now if I look at the source, they are quite different :

    <main class="o-container">
        <div class="o-container o-container--medium">
            <div class="o-container-vertical">
                <div class="c-display">
                    <h1>Browser support</h1>

    <main class="o-container">
        <div class="o-container o-container--medium">
            <div class="o-container-vertical">
                <h1 class="c-d-h1">Blog</h1>

    <main class="o-container">
        <div class="o-container o-container--medium">
            <div class="o-container-vertical">
                <article class="c-blog-article">
                    <div class="c-blog-article__header">
                        <h1 class="c-d-h1">Smart announces an open design system</h1>

Would it be possible to have less differences ?

• Maybe reuse c-display instead c-blog-xxx
• Maybe use article everywhere
• Maybe have always the wrapping div around the title even when the date is not present
• c-d-h1 is not present on the first page, so I guess it would be nice to not have it on the other
• Is-it normal o-container is repeated in the div following the main ?

[Wolfr]

I think you have to understand the usage of the c-content class vs for example a specific .c-h1 class.

In our stylesheet, we first reset all HTML element styles with a global reset.

Then, within certain areas where we want rich text, we mark them with .c-content (or .c-display, which is equivalent but produces larger type sizes and more distinction between headings).

This gives us rich text for every element within that div.

The specific class c-d-h1 is meant to “invoke” the styling for a specific element.

In the following markup:

  <h1 class="c-d-h1">Smart announces an open design system</h1>
  <p>October 8, 2021</p>
</div>

The h1 gets rich styling, equivalent to .c-display h1, by having a c-d-h1 class, but the paragraph doesn't receive normal paragraph styling (which contains margins). This allows us to simply style .c-blog-article__header p with a muted color, which is the only styling that needs to be applied here.

This way we don't need to reset anything. If you need to reset something in CSS (except for a global reset) you're likely doing something wrong.

This all to say that the system is all very deliberate.

---

About article, I would only use article for a blog post, I don't think it makes that much sense for a content page. Google news bot for example uses article as a deterministic factor (along with other things like the existence of a date) to find out if something is an article.

If you use article for things that are not news, then where does it stop?

[thusc]

So I rember that

• you don't consider article to be semantically valid on our site outside of the blog post
• although c-display is the right class for blog post content, you don't consider the blog post title to fall within that use case (which is a bit of a surprise for me)

Is that right ?

I really like the explanation you gave above. Do you think we could have additional explanations like this one in the documentation, or maybe it would deserve a blog post ?