React js, confused on CSS file

Question

I was reviewing someone's React JS project and i'm confused regarding the CSS file. It referred to classes such as '.cards__item', '.cards__item__pic-wrap', and '.cards__item__img' which is not apart of the JavaScript file. Thinking the code was useless, I removed it, and it significantly changed the webpage. Therefore, the code actually does something.

Can anyone explain this? I have been stuck on this for a while. Any help would be greatly appreciated.

JavaScript File:

import React from 'react';
import './Cards.css';
import CardItem from './CardItem';

const Cards= () => {
  return (
    <div className='cards'>
      <h1>Check out these EPIC Destinations!</h1>
      <div className='cards__container'>
        <div className='cards__wrapper'>
          <ul className='cards__items'>
            <CardItem
              src='images/img-9.jpg'
              text='Explore the hidden waterfall deep inside the Amazon Jungle'
              label='Adventure'
              path='/services'
            />
            <CardItem
              src='images/img-2.jpg'
              text='Travel through the Islands of Bali in a Private Cruise'
              label='Luxury'
              path='/services'
            />
          </ul>
          <ul className='cards__items'>
            <CardItem
              src='images/img-3.jpg'
              text='Set Sail in the Atlantic Ocean visiting Uncharted Waters'
              label='Mystery'
              path='/services'
            />
            <CardItem
              src='images/img-4.jpg'
              text='Experience Football on Top of the Himilayan Mountains'
              label='Adventure'
              path='/products'
            />
            <CardItem
              src='images/img-8.jpg'
              text='Ride through the Sahara Desert on a guided camel tour'
              label='Adrenaline'
              path='/sign-up'
            />
          </ul>
        </div>
      </div>
    </div>
  );
}

export default Cards;

CSS File:

.cards {
  padding: 3rem;
  background: #fff;
}

h1 {
  text-align: center;
}

.cards__container {
  display: flex;
  flex-flow: column;
  align-items: center;
  max-width: 1120px;
  width: 90%;
  margin: 0 auto;
}

.cards__wrapper {
  position: relative;
  margin: 50px 0 45px;
}

.cards__items {
  margin-bottom: 24px;
}
______________________________________________________________________

.cards__item {
  display: flex;
  flex: 1;
  margin: 0 1rem;
  border-radius: 10px;
}

.cards__item__link {
  display: flex;
  flex-flow: column;
  width: 100%;
  box-shadow: 0 6px 20px rgba(56, 125, 255, 0.17);
  -webkit-filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
  filter: drop-shadow(0 6px 20px rgba(56, 125, 255, 0.017));
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}

.cards__item__pic-wrap {
  position: relative;
  width: 100%;
  padding-top: 67%;
  overflow: hidden;
}


.cards__item__pic-wrap::after {
  content: attr(data-category);
  position: absolute;
  bottom: 0;
  margin-left: 10px;
  padding: 6px 8px;
  max-width: calc((100%) - 60px);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background-color: #1f98f4;
  box-sizing: border-box;
}

.cards__item__img {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  width: 100%;
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: cover;
  transition: all 0.2s linear;
}

.cards__item__img:hover {
  transform: scale(1.1);
}

.cards__item__info {
  padding: 20px 30px 30px;
}

.cards__item__text {
  color: #252e48;
  font-size: 18px;
  line-height: 24px;
}

@media only screen and (min-width: 1200px) {
  .content__blog__container {
    width: 84%;
  }
}

@media only screen and (min-width: 1024px) {
  .cards__items {
    display: flex;
  }
}

@media only screen and (max-width: 1024px) {
  .cards__item {
    margin-bottom: 2rem;
  }
}

li {
  list-style: none;
}

Did you check ./CardItem to see if the code that uses the css classes are there? — Patrick Evans
– Patrick Evans, Commented Aug 15, 2021 at 0:21

Bruno Rodrigues · Accepted Answer · 2021-08-15 00:27:29Z

1

<CardItem /> is another react component. It is imported at line 3. import CardItem from './CardItem';

Those css classes probably are being referenced inside this component. Check this component code.

answered Aug 15, 2021 at 0:27

Bruno Rodrigues

665 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cliff Crerar · Accepted Answer · 2021-08-15 00:58:49Z

Did you inspect the code for the CardItems component? It might so happen that the classes are added programatically by the component code before or after the component has rendered.

Also it would seem as if those classes are not used but do you notice most of them seem to be sub-classes of the .cards-item class. This is a tell tale sign that some kind of UI framework is at play and the someone you are referring to sliced it out and localized framework style classes for some reason.

Front end frameworks are initialized when an application has [bootstrapped][1] and will treat certain elements in a certain manner being invisible to you as the dev. Check the higher order components to see what they import.

A sure way you can check this is when the application is at rest (the web server is running and the app has loaded currently waiting for the user to do something) open the developer tools console that is standard in your browser by right clicking the cursor on the elements that are misbehaving.

On the elements tab of the developer console you can see what classes are applied to an element.

This will reveal to you what elements are affected and which classes are in play.

Another way without needing to tediously peruse the markup is by running vanilla js in the developer console.

Once again open your browser console tools by right-click inspecting. Ensure that on the dev console nav at the top (where previously you had been on the elements tab) click the console tab. Click inside of the white space (dark grey space if you prefer dark mode).

Your cursor will start flashing, this console interprets Vanilla Javascript. Type the following for example.

document.querySelectorAll('.cards__item__link');

This returns a array list of the element node objects. See the result im the image, I am running this while browsing a microsoft web site and using the .container-element css class.

Element nodes are the beef of what a markup element is, contains and can do. Select any one of them by clicking on the arrow next to it. This will reveal the list of properties and methods. Look for the classlist property and check its content.

Another command that will yield the exact same result but will show the markup instead nodes in the built in JavaScript console.

document.getElementsByClass('cards__item__link');

Collectives™ on Stack Overflow

React js, confused on CSS file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related