Best way to implement css

Question

In some parts of my code I need to use the same css for some elements, but it is repetitive and the same code is used several times, and it looks meshy in html it looks something like this.

orange

apple

It is the same code repeated several times, so I would like to know the best way to implement a css, which is easier and more understandable.

const ItemPage = () => {
    const item = ({name}) => <p style={{
        color: 'red',
        height: '50%'
    }}>{name}</p>;

    return(
        <div>
            <item name='orange'/>
            <item name='apple'/>
        </div>
    )
}

Koko · Accepted Answer · 2021-03-20 06:49:22Z

2

I think the best way to use css more efficiently is to create a separate file and then use it wherever you want to use it instead of repeating the code over and over again

answered Mar 20, 2021 at 6:49

Koko

576 bronze badges

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

Comments

Filip Huhta · Accepted Answer · 2021-03-20 09:05:40Z

1

I would suggest you create a new CSS file

Write this in the CSS file if you want to style all  tags.

Example:

p {
color: red; 
height: 50%;
}

If you want to just style those two  tags implement a class and name it whatever you want and add it to your  tag.

Example:

.style-p {
color: red; 
height: 50%;
}

<p className="style-p">apple</p>

Then you just import the file to your current .js file

edited Mar 20, 2021 at 9:05

answered Mar 20, 2021 at 6:51

Filip Huhta

2,43815 silver badges31 bronze badges

Comments

TERMINATOR · Accepted Answer · 2021-03-20 16:11:24Z

0

I would suggest doing the same as the previous answer, but if you're looking for example to make all paragraphs center aligned add this code to your HTML File:

<style>
    p {
    text-align: center;
    }
</style>

And that will make all paragraphs center aligned. Best Of Luck

edited Mar 20, 2021 at 16:11

TERMINATOR

1,2871 gold badge14 silver badges24 bronze badges

answered Mar 20, 2021 at 6:53

Nazih Abdo

11 bronze badge

Collectives™ on Stack Overflow

Best way to implement css

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related