What are utility classes in CSS? Beginner CSS developer [closed] - css

Question

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 1 year ago.
Improve this question
There are these utility classes. I'm a beginner in CSS, and I want to organise my CSS in a better way.
.shadow {
box-shadow: 0 0 10px red;
}
.padding {
padding: 10px;
}
.radius {
border-radius: 10px;
}
.card {
background-color: red;
border: 1px solid red;
}

Answer 1

There appears to be no formal definition of 'utility class'.
However, a common use of the phrase applies to simple, often single setting, classes with some semantics attached to the class name.
So in your examples perhaps a more 'utility' view would be to recognise that there may be several padding settings, for example and set the nomenclature accordingly.
.shadow-10-red {
box-shadow: 0 0 10px red;
}
.padding-10 {
padding: 10px;
}
.radius-10 {
border-radius: 10px;
}
.card-red {
background-color: red;
border:1px solid red;
}
However, these are utilities, very basic, and so are used rather differently from a normal class that sets several properties at once.
In the change of padding shown in the discussion on Charles Lavalard's answer, I worry that the p-1 class, which initially appears to have a link to the semantics - viz 1em, then gets changed to mean 1.5em. That isn't my understanding of a utility class.
But then perhaps it's all getting a bit subjective because utility classes don't have a standard definition. And perhaps the p-1, etc. in that example was not intended to have anything to do with the property values, but it was saying 'the first of the padding choices' which would be logical.

Answer 2

You can use more specific names for your class, so if you want a specific padding for example, you can have multiple options:
.block {
color: white;
background-color: teal;
margin: 10px;
}
.p-1 {
padding: 1rem;
}
.p-2 {
padding: 2rem;
}
.p-3 {
padding: 3rem;
}
#media only screen and (max-width: 600px) {
.p-1 {
padding: 1.5rem;
}
.p-2 {
padding: 2.5rem;
}
.p-3 {
padding: 3.5rem;
}
}
<div class="block p-1">Padding 1</div>
<div class="block p-2">Padding 2</div>
<div class="block p-3">Padding 3</div>
You can take a look at Tailwind CSS, for example.