Casing

In programming languages, you can make up any variable name you want, as long as they don't have spaces. In CSS, typically the things that we name are either class names, ID's, or CSS Custom Properties.

The format strategy that you use can sometimes be called "casing" or your naming conventions.

Developers love consistency, so we try to name our variables and class names with some sort of convention. Some companies you work with will even require it. Since spaces aren't allowed, most conventions try to help you distinguish multi-word variables with some pattern.

One pattern is to use hyphens and all lower-case letters like this: user-is-logged-in. This is called "kebab-case" because it looks like a stick through food (like a kebab). This is a popular casing in CSS because CSS properties already use this same casing:

/* A CSS property using kebab-case */
background-color: red;

Another pattern only capitalizes the first letter of words, but not the very first word like this: userIsLoggedIn. This is called "camelCase" and it's popular with several languages including JavaScript.

This article does a pretty good job of breaking down different casings. I've noticed throughout my career that developers tend to prefer a naming convention that is similar to the respective language they're using. For example, PHP uses underscore_case so a lot of developers do that with their variables in PHP. The JavaScript language uses camelCase so it's the preferred convention in JS. In CSS, properties are done with kebab-case so I see that a lot in other developer's CSS. But there's also a lot of devs who would identify with being more of a JavaScript developer and they might just prefer to do camelCase for JS and CSS. It really comes down to preference.

For me, it's a "When in rome..." type of thing, so I try to do whatever is most conventional in the respective language I'm using.