Kevin Powell - Community•12mo ago

How do you efficiently class text elements in CSS?

Summary: How do you generally go about grouping text elements in css? Hey, I'm working on my portfolio website and doing it with HTML/CSS to help differentiate as a Product Designer. I'm relatively new with CSS but one of the things that I was wondering is how to go about text and classes I initially started off with using a root font sizing and things of that sort so I can just edit the root on screen dimension changes.

    --root-font-size: 1rem;
    --small-font-size:calc(var(--root-font-size) * 0.75);
    --regular-font-size: var(--root-font-size);
    --accent-font-size:calc(var(--root-font-size)*1.25);
    --subhead-font-size: calc(var(--root-font-size) * 1.5);
    --header-font-size: calc(var(--root-font-size) * 2);

    --root-font-size: 1rem;
    --small-font-size:calc(var(--root-font-size) * 0.75);
    --regular-font-size: var(--root-font-size);
    --accent-font-size:calc(var(--root-font-size)*1.25);
    --subhead-font-size: calc(var(--root-font-size) * 1.5);
    --header-font-size: calc(var(--root-font-size) * 2);

After this I began creating relatively straightforward classes. As I was just following how Figma was going about this (since I created the mock).

.name-font  {
    font-size:var(--special-font-size);
    color: var(--text-color-heading);
    font-family: var(--special-font-family);
    font-weight:var(--font-weight-semibold);
}

.name-font  {
    font-size:var(--special-font-size);
    color: var(--text-color-heading);
    font-family: var(--special-font-family);
    font-weight:var(--font-weight-semibold);
}

Later on after I got a bit more comfortable I began playing around with styling of this sort, to try and deal with multiple classes. At this point instead of classing everything, I'm beginning to look for re-usability and trying to minimize the number of classes in the code.

.case-study-font {
    font-family: var(--regular-font-family);
    line-height: 1.5;
}

.case-study-font > h1 {
    color:var(--text-primary-clr);
    font-size:var(--accent-font-size);
    font-weight:var(--font-weight-semibold);
    letter-spacing: 0.9px;
}

.case-study-font > p {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
}

.case-study-font > ul {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    padding-left: 40px;
    list-style-type: disc;
    padding: var(--space-S) var(--space-M);
}

.case-study-font {
    font-family: var(--regular-font-family);
    line-height: 1.5;
}

.case-study-font > h1 {
    color:var(--text-primary-clr);
    font-size:var(--accent-font-size);
    font-weight:var(--font-weight-semibold);
    letter-spacing: 0.9px;
}

.case-study-font > p {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
}

.case-study-font > ul {
    color: var(--text-tert-clr);
    font-size:var(--regular-font-size);
    font-weight: var(--font-weight-medium);
    padding-left: 40px;
    list-style-type: disc;
    padding: var(--space-S) var(--space-M);
}

Overall my question is how does an experienced dev go about grouping font classes and elements to be efficient. What are some of the things I should be doing like should I be passing colors via inherit and such?

7 Replies

vince•12mo ago

You are over optimizing so hard please do not fall into that trap that I and many other devs fall into You're not making Facebook just make variables for things you reuse often Eg: font sizes. A lot of the time I just group the font size based on the element eg h1s get X font size, h2 gets Y font size etc For your other fonts that get a bit more variation you can put them into variables or set the container font size to something like 1.5rem and have the text font size be em so it scales based off the container font size

QuadOP•12mo ago

I put some examples of how I understood what you meant for both. So by the setting them you mean something like the following? and using those modifiers to deal with the sizing.

h1 {font-size: {n-size} rem;}
H2 {font-size: {another-size} rem;}

h1 {font-size: {n-size} rem;}
H2 {font-size: {another-size} rem;}

Then for variations something like this?

<div class="test">
<p class="em-test">123</p>
</div>

<div class="test">
<p class="em-test">123</p>
</div>

.test {font-size: 1.5rem;}
.em-test {font-size: 1em;}

.test {font-size: 1.5rem;}
.em-test {font-size: 1em;}

I have been getting a bit of a feel that I've been over optimizing. I just got a bit too trigger happy with how I was doing it as I had a bit of a mental breakthrough. Thank you for the advice for real!

vince•12mo ago

Yea pretty much! So your h1s h2s and any other font sizes you want to keep consistent you can just set their font size like h3 = 1.5rem or use em if you want it to scale on the container eg

article.blog-preview {
   font-size: 1.25rem;
}

article.blog-preview h3 {
   font-size: 1em; /* will be 1.25rem */
}

article.blog-preview {
   font-size: 1.25rem;
}

article.blog-preview h3 {
   font-size: 1em; /* will be 1.25rem */
}

clevermissfox•12mo ago

If you’re going to go to all this trouble, I would recommend using a clamp !

vince•12mo ago

Yup I also recommend clamp I use it 24/7

QuadOP•12mo ago

Thanks for the feedback, I researched clamps a bit and had another question.

  font-size: clamp(1rem, 2rem, 3rem);

  font-size: clamp(1rem, 2rem, 3rem);

So based on the screen sizing the font would scale between these values 3 values going from min to preferred to max. So one thing I noticed was I was feeding in things like root values, and using the media queries to change the root value.
Can I use clamp as a replacement for media queries changing font size? and then save media queries for layout shifts and such instead of messing around with the root values. Again thank you both for taking the time to reply, I haven't really found any places to ask questions so I really appreciate this.

vince•12mo ago

No worries, you can use clamp instead of media queries. Also you would do something like clamp(1rem, 1rem + 0.5vw, 3rem) instead of 1rem, 2rem, 3rem

Gaming

Programming

How do you efficiently class text elements in CSS?