What Are Common Classes, Helper Classes, and Utility Classes in CSS

What are common classes, helper classes, and utility classes in CSS?

basically:

1. utility AND HELPERS means minimizing, CSS properties like

.m-0{
  margin: 0;
}
//or
.items-center{
  align-items:center;
}

2. Common classes, the classes that have the same properties used too much like

.clearfix:after 
{
    clear:both;
    content:".";
    display:block;
    height:0;
    line-height:0;
    visibility:hidden;
}

read more at

1. How Writing CSS Helper Classes Improved My Productivity
2. CSS - common classes

CSS - common classes

yeah, if you don't use common classes like you do then your CSS files get extremely large and every class becomes extremely specific

some other common classes...

.split { float: left; width: 50%; }
.center { text-align: center: margin: auto; display: block; }
.bold { font-weight: bold; }
.top { vertical-align: top; }
.bottom { vertical-align: bottom; }

Are utility classes evil?

Utility classes aren't exactly evil, but they can violate the principles that compose a good object-oriented design. In a good object-oriented design, most classes should represent a single thing and all of its attributes and operations. If you are operating on a thing, that method should probably be a member of that thing.

However, there are times when you can use utility classes to group a number of methods together — an example being the java.util.Collections class which provides a number of utilities that can be used on any Java Collection. These aren't specific to one particular type of Collection, but instead implement algorithms that can be used on any Collection.

Really, what you need to do is think about your design and determine where it makes the most sense to put the methods. Usually, it's as operations inside of a class. However, sometimes, it is indeed as a utility class. When you do use a utility class, however, don't just throw random methods into it, instead, organize the methods by purpose and functionality.

utility classes in styled component react

One of the best solutions is to use https://styled-system.com/, it plays well with Styled Components and other libraries like Emotion and it offers what you need, to use utility-classes in the component definition.

Example:

import styled from 'styled-components'
import { color, space, fontSize } from 'styled-system'

// Set default styles and add styled-system functions to your component
const Box = styled.div`

  /*defaut styles */
  color: white;
  font-size: 25px;
  padding: 20px;

  /* configurable properties */;
  ${color};
  ${space};
  ${fontSize};

`;

And to use it:

  <Box bg="black" >
    Lorem Ipsum
  </Box>  

  <Box bg="black" color="green" fontSize="12px" p="10px">
    Lorem Ipsum
  </Box>

That code, will render this:

It also supports Media-Querys, Themes etc..

You can play with this CodeAndSandbox where it is been used with Styled Components https://codesandbox.io/s/styled-components-with-styled-system-njr17

Does twitter bootstrap have any font-size utility classes?

There is no classes to change the font size but you can manage font size with strong and small tag but you cant change paragraph font size. You need to create custom CSS to do that.

Is there a way to individually target multiple CSS classes at once?

Use a comma.

.nav-1:hover,
.nav-2:hover,
.nav-3:hover {
  color: #fc9426;
}

Although I don't have any markup to go off of, it looks like you could create a helper/modifier class instead of defining the same thing over and over again.

It might look something like this:

[class^="nav-"] {  margin: 1rem 0;  padding: 0 1rem;  min-height: 3rem;  color: #333;  font: 1rem/3rem Arial, sans-serif;  border-bottom: 1px solid black;}
/** * Utility/Modifier style properties that * any nav could add to their base of styles. */.nav-branded {  color: white;  background-color: #fc643c;}.nav-branded:hover {  background-color: hotpink;}
/** * These classes have styles specific to  * each class (acts like an ID but  * without the specificity). */.nav-1 {  /* Waiting for some styles. */}.nav-2 {  border-bottom-width: 4px;}.nav-3 {  border-bottom-style: dashed;}

<nav class="nav-1 nav-branded">Nav One</nav><nav class="nav-2">Nav Two</nav><nav class="nav-3 nav-branded">Nav Three</nav>

---

Related Topics