DEV Community

Cover image for Meet Yumma CSS
Renildo Pereira
Renildo Pereira

Posted on • Edited on

Meet Yumma CSS

#yummacss #css #beginners #webdev

Maintaining and scaling styles in CSS can be a lot of work, whether you're using inline or external styles. It can be really frustrating when you're trying to keep your designs consistently predictable, and most importantly, scalable.

What is Yumma CSS?

Think of Yumma CSS as a set of abbreviated utility classes for building faster and more maintainable UIs. Yumma CSS has a wide range of reusable utilities that you can apply to your design system to make it more consistent and less unpredictable.

Here's a reference example of the Yumma CSS utilities:

CSS Property Yumma CSS Utility
align-items: center; ai-c
background-color: white; bg-white
background-repeat: no-repeat; br-nr
background-size: cover; bs-c
border-color: black; bc-black
border-radius: 0.5rem; rad-2
border-width: 1px; b-1
box-sizing: border-box; bs-bb
display: flex; d-f
filter: grayscale(100%); f-g-100
font-weight: 600; fw-600
gap: 1rem; g-4
grid-column: span 2 / span 2; gc-s-2
grid-template-columns: repeat(3, 1fr); gtc-3
height: auto; h-auto
justify-content: space-between; jc-sb
margin: 1rem; m-4
opacity: 0.5; o-50
outline-style: solid; os-s
outline-width: 2px; ow-2
overflow: hidden; o-h
padding: 0.5rem; p-2
text-align: center; ta-c
text-color: white; tc-white
width: 100%; w-full

Using Flexbox utilities

Let’s look at a classic layout case: centering with flexbox.

Using inline styles 

<div style="align-items: center; display: flex; justify-content: center;">
  ...
</div>
Enter fullscreen mode Exit fullscreen mode

Using external styles 

p {
  align-items: center;
  display: flex;
  justify-content: center;
}
Enter fullscreen mode Exit fullscreen mode

Using Yumma CSS

<div class="ai-c d-f jc-c">...</div>
Enter fullscreen mode Exit fullscreen mode

You end up with the same result, but the code is much shorter, more reusable, and way easier to grow.

You can use consistent patterns like m-{n} or bg-{color} to get faster prototyping directly in markup without writing the traditional inline or external styles.

Overriding styles conditionally

So, let's say you use a specific utility in your markup and you want to override its value based on the user's screen size or other factors, such as hover states.

Yumma CSS hooks you up with utility modifiers that let you target use cases like sm:*, md:*, lg:*, and xxl:* to target a specific viewport, and h:* to target hover states.

Media queries

Let's take a look at how we can use media queries to change the layout of a grid based on the size of the screen.

Using external styles 

.container {
  display: grid;
  gap: 4rem;
  grid-template-columns: 1fr;
}

@media (min-width: 640px) {
  .container {
    grid-template-columns: repeat(3, 1fr);
  }
}
Enter fullscreen mode Exit fullscreen mode

Using Yumma CSS 

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="bg-indigo d-16"></div>
  <div class="bg-indigo d-16"></div>
  <div class="bg-indigo d-16"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Hover states

Also, you can control hover states with Yumma CSS. For example, if you want to hide an element when the user hovers over it, you can use the h:* modifier.

Using external styles 

.flex {
  display: flex;
}

.hidden:hover {
  display: none;
}
Enter fullscreen mode Exit fullscreen mode

Using Yumma CSS 

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="ai-c bg-indigo d-16 d-f h:d-none jc-c"></div>
</div>
Enter fullscreen mode Exit fullscreen mode

Getting started

Try Yumma CSS with npm or in your browser on Yumma CSS Play.

npm install yummacss -D
Enter fullscreen mode Exit fullscreen mode

Closing thoughts

With Yumma CSS, you get a set of abbreviated utilities designed to make your design system easier to maintain and extend, so you can focus on creating reusable UI components.

Learn more about Yumma CSS, in the documentation.

Top comments (4)

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

When you're working on a big project, it's really important to be able to maintain your work.

If you're looking for maintainability, you'll just use CSS and leverage its main strength which is separating the styling from the layout.

If you're using a CSS framework to inline your styles into HTML, you're probably more worried about development speed than long-term maintainability.

Collapse
 
rrenildopereiraa profile image
Renildo Pereira •

The main thing is to be as consistent with naming things as possible without having to ship unnecessary CSS to production. I forgot to mention that regular CSS will be very hard to maintain in the long term unless you're using *.modules.css or simply using individual styles across your app. I've covered this exact topic here, please take a look: yummacss.com/docs/utility-classes

Collapse
 
darkwiiplayer profile image
𒎏Wii 🏳️‍⚧️ •

I forgot to mention that regular CSS will be very hard to maintain in the long term

This is the part that I don't really buy: when it is handled well, plain CSS is quite easy to maintain. All you need is a consistent way of selecting elements and the tiniest bit of discipline in splitting your styles into different files rather than having one big all.css, although even that can work for most sites the average web dev will be working on.

Thread Thread
 
rrenildopereiraa profile image
Renildo Pereira •

I don't think that CSS frameworks or libraries can replace the ability of developers who know how to use CSS in a healthy way.

But CSS files are rarely well maintained. I've seen many things like lots of dead CSS, bad naming conventions, redundant classes, use of old syntax, and the list goes on.

I think that building design systems manually over and over again is a hard way to go. Yumma CSS gives me tools to always stay predictable, it gives me more confidence because it's just there for me to use.