I am working on my first web dev project, with someone, and I am responsible for the front-end part. In my personal projects I've been using plain css, but in this template I have seen that they are using something else, a different structure, I think. I kind of figure it out how it works, but because I never crossed paths with it before, it makes developing hard for me. I would like to know what it is so I can read some documentation and understand it better. (as an example: usually ,when I use className, I put the class name between "", but here is like css.something) Can you tell me what it is ? I will leave a snippet here
.menuItem {
@apply --marketplaceListingAttributeFontStyles;
color: var(--matterColor);
/* Layout */
position: relative;
min-width: 300px;
margin: 0;
padding: 4px 30px;
display: flex;
align-items: center;
justify-content: center;
/* Override button styles */
outline: none;
text-align: left;
border: none;
white-space: nowrap;
cursor: pointer;
&:focus,
&:hover {
color: var(--matterColorDark);
}
&:hover .menuItemBorder {
width: 6px;
}
}
<button className={css.menuItem} onClick={()=> this.selectOption(queryParamName, option.key, dates)}>