Kevin Powell - CommunityKP-C
Kevin Powell - Community•3y ago•
10 replies
Quad

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);


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);
}



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);
}


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?
Was this page helpful?