CODEWITHSUNDEEP
htmlcssreactjsfrontendsharetribe
Robert B
Robert B

Reputation: 67

What is this css structure called?

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)}>

Upvotes: 1

Views: 123

Answers (4)

RedBassett
RedBassett

Reputation: 3587

The Javascript format you see there is a view binding, or something we might describe as a Domain Specific Language (DSL). It is Javascript used by some framework (likely React or another frontend framework) to build the HTML you see on the page. I can't be certain since I don't know what framework I'm looking at, but I'm willing to bet that if you use the "inspect" feature in your browser, you will see this in the resulting HTML that is created by that Javascript:

<button class="menuItem" onClick="[...]">

This format should look familiar to you if you are expecting plain HTML. That Javascript you linked to just builds this HTML dynamically. In the example you provided, the curly braces ({ }) are just an indicator to the Javascript library that it need to fill in that placeholder with something, in this case css.menuItem, which translates to a class name of menuItem rendered into a css class tag (class="menuItem").

Upvotes: 0

phuzi
phuzi

Reputation: 13060

Although I'm not overly familiar with React, this (className={css.menuItem}) is some sort of model binding so that when React has done it's thing it will bind the value of css.menuItem to the rendered HTML probably ending up with something like

<button className=".menuItem" ...>

Upvotes: 0

Rohan Asokan
Rohan Asokan

Reputation: 686

Have you looked into what that css object holds?

From what I can see, the @apply puts the css part to be in pre-compiled language like SASS or SCSS.

You have not mentioned if it is ReactJS. If it is then there is a high possibility that whatever you are dealing with is in JSS.

Upvotes: -1

Mahdi
Mahdi

Reputation: 1405

This is CSS Modules and you can read more about this usage of CSS in these 2 links:

Upvotes: 3

Related Questions