What is the functionality of "classnames" in cases where there are multiple classes sharing the same name?

Question

What is the functionality of "classnames" in cases where there are multiple classes sharing the same name?

Currently, I am reviewing some code that utilizes the npm utility classnames found at https://www.npmjs.com/package/classnames.

Within the scss file, there are various classes with identical names (small and large), as shown below:

.buttonA {
  &.small {
    height: 50px;
  }
  &.large {
    height: 80px;
  }
}

.buttonB {
  &.small {
    height: 20px;
  }
  &.large {
    height: 40px;
  }
}

This portion of the code is from the tsx file:

<IconButton
  ....
  className={
    classNames('buttonA', 'small')
  }
/>

I find this setup quite perplexing as it's unclear which 'small' class will be applied, given that we have two in the scss file. My assumption is that it would prioritize the 'small' class from buttonA since it's specified as the first parameter. However, I'm left wondering if these parameters are interdependent. What happens if I use classNames('buttonB', 'small'), or even just classNames('small')?

html css typescript

Answer 1

Answer №1

It appears that the issue at hand stems from an overestimation of the capabilities of the classnames utility and a potential misunderstanding of CSS and Sass functionality.

classnames serves as a tool for dynamically concatenating strings based on conditions. It does not possess the ability to comprehend or analyze the CSS properties associated with the outputted string values of the className. In fact, it can be utilized beyond styling purposes, such as in conditional text generation like:

const errors = ['this is required', 'that is also required'];
const numErrs = errors.length;
const errMsg = `You have ${numErrs} ${classnames('error', { s: numErrs > 1 })}`;

// errMsg is "You have 1 error" for a single error and "You have 2 errors" for two errors

The use of the parent selector (&) in your Sass file allows for the grouping of inner rules under a parent container, resulting in the following CSS structure:

.buttonA.small {
  /* properties here will applied to an element with both `buttonA` and `small` class */
  height: 50px;
}

.buttonA.large {
  /* properties here will applied to an element with both `buttonA` and `large` class */
  height: 80px;
}

.buttonB.small {
  /* properties here will applied to an element with both `buttonB` and `small` class */
  height: 20px;
}

.buttonB.large {
  /* properties here will applied to an element with both `buttonB` and `large` class */
  height: 40px;
}

Therefore, keeping these key points in mind:

classnames('buttonA', 'small') will result in the string "buttonA small", assigning the classes .buttonA and .small to the element's className
Understanding how the Sass-generated CSS is interpreted by browsers, the element will exhibit a height of 50px

Answer 2

It appears that the issue at hand stems from an overestimation of the capabilities of the classnames utility and a potential misunderstanding of CSS and Sass functionality.

classnames serves as a tool for dynamically concatenating strings based on conditions. It does not possess the ability to comprehend or analyze the CSS properties associated with the outputted string values of the className. In fact, it can be utilized beyond styling purposes, such as in conditional text generation like:

const errors = ['this is required', 'that is also required'];
const numErrs = errors.length;
const errMsg = `You have ${numErrs} ${classnames('error', { s: numErrs > 1 })}`;

// errMsg is "You have 1 error" for a single error and "You have 2 errors" for two errors

The use of the parent selector (&) in your Sass file allows for the grouping of inner rules under a parent container, resulting in the following CSS structure:

.buttonA.small {
  /* properties here will applied to an element with both `buttonA` and `small` class */
  height: 50px;
}

.buttonA.large {
  /* properties here will applied to an element with both `buttonA` and `large` class */
  height: 80px;
}

.buttonB.small {
  /* properties here will applied to an element with both `buttonB` and `small` class */
  height: 20px;
}

.buttonB.large {
  /* properties here will applied to an element with both `buttonB` and `large` class */
  height: 40px;
}

Therefore, keeping these key points in mind:

classnames('buttonA', 'small') will result in the string "buttonA small", assigning the classes .buttonA and .small to the element's className
Understanding how the Sass-generated CSS is interpreted by browsers, the element will exhibit a height of 50px

What is the functionality of "classnames" in cases where there are multiple classes sharing the same name?

Answer №1

Similar questions

Discover more in React about using ellipses (...) with dangerouslySetInnerHTML

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

What method can I use to incorporate a custom CSS code in Formfacade to conceal the back button on a Google Form?

Clicking on the button link causes it to jump to a

Disabling the 'fixed navigation bar' feature for mobile devices

Exploring the parent of an HTML element / Finding a child element with unique content

Issue encountered when attempting to retrieve elements within an HTA's IFrame

Tips for triggering an error during compilation for parameters lacking "as const"

implementation of bug decrementation with a fadeout

What could be the reason my vue.js button is not generating a fresh textarea?

How to Implement Horizontal Sorting with jQuery Using Various HTML Elements

Encountering a problem with Bootstrap 4 when trying to set medium breakpoints for columns, causing them to wrap to

An element from an array of typescript items

Maintaining the aspect ratio of images in Bootstrap Carousel: A complete guide

Using the jquery plugin Sidr in Rails: A complete guide

JavaScript file encountering a problem with its global variables

Using the viewport meta tag in HTML and CSS within Laravel's Blade template while also

Leverage CSS to generate a visually appealing table of contents incorporating images and text blocks, perfectly aligned for an enhanced

The contents of my div extend beyond the border-radius

How can you use jQuery to select and manipulate multiple form inputs with a common class?