I am currently collaborating on my inaugural web development venture alongside someone else, and I have been tasked with handling the front-end aspect. While working on personal projects, I have always relied on plain CSS. However, in this particular template, I noticed they are using a different structure that is unfamiliar to me. Though I have managed to grasp the basics of how it functions, my lack of prior exposure to it is presenting challenges during the development process. I am eager to learn more about this new approach in order to enhance my understanding. For instance, typically when I utilize className, I enclose the class name in quotation marks, but here it appears as css.something. Could you please shed light on what this methodology entails? Below is a snippet for reference:
.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)}>