Functional classes

CSS is functional and global.

What we call “functional CSS” rejects semantic class names in favor of strictly self-evident labels. Objective values and their corresponding properties—released from the burden of being subjectively interpreted—revert back to the stuff of data entry.


            /* type scale */
            .h1 {
            font-size: 2.827em;
            }
            .h2 {
            font-size: 2em;
            }
            .h3 {
            font-size: 1.414em;
            }
            .h4 {
            font-size: 1em;
            }
            .h5 {
            font-size: 0.707em;
            }
            .h6 {
            font-size: 0.5em;
            }

            /* functional classes for type... */
            .bold {
            font-weight: 700;
            }
            .italic {
            font-style: italic;
            }
            .uppercase {
            text-transform: uppercase;
            letter-spacing: 0.05em;
            }
            .text-center {
            text-align: center;
            }
            .color-white {
            color: white;
            }
            .color-grey {
            color: #ababab;
            }
            .antialiased {
            -webkit-font-smoothing: antialiased;
            }

            /* ...and layout */
            .inline {
            display: inline;
            }
            .block {
            display: block;
            }
            .inline-block {
            display: inline-block;
            }
            .relative,
            .absolute {
            margin: 0;
            }
            .relative {
            position: relative;
            }
            .absolute {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            }
            .absolute.center {
            margin: auto;
            }
            .relative.center {
            margin: 0 auto;
            }

Related to functional classes are utilities. Think recurring components like wrappers, flexbox, etc. Such classes are semantic to a degree but essentially functional because they are self-explanatory. A class designated .wrapper, for instance, suggests a material of a certain size with a certain amount of space inside to contain other things—an element with width and padding.


            /* miscellaneous utilities */
            .wrap {
            padding: 0.707em;
            }
            @media (min-width: 25em) {
            .wrap {
            padding: 1.414em;
            }
            }
            @media (min-width: 33.3em) {
            .wrap {
            padding: 2em;
            }
            }
            @media (min-width: 56.5em) {
            .wrap-golden {
            padding-left: 0;
            padding-right: 0;
            width: 61.8%;
            }
            }
            @media (min-width: 61.8em) {
            .wrap-half {
            padding-left: 0;
            padding-right: 0;
            width: 50%;
            }
            }
            .flex {
            display: flex;
            justify-content: space-between;
            align-items: center;
            }