I'm building my own CSS library or framework, whatever you would like to call it ,but I'm facing a problem where if I have 10 li tag , they will all have the same classes which is .pl{ padding-left:10px} .mr{ margin-right:10px} and another attributes as needed , which approache should I follow ? create a class that holds all that attributes and assign that class to the li like that

.list-item{
margin-right:10px;
padding-left:10px;
}

<li />

or give all the required attribute to all li I will make like this

<li />

knowing if i followed the first approach the use of the library will be much more less than the second one

(my library is considered of a css file that carry different class names of a specific attributes as .mr-10 => margin-right:10px and so on)

CodePudding user response：

The answer to your question is really opinion based and depending on the size of the project. If you know, that you will use that padding and margin in other cases I would seperate them into two classes, like you did (.mr and .pl). However, if you want to join them together I would prefer to assign a class to the parent, thus the <ul> or <ol>, like so:

.my-special-list li{
   margin-right:10px;
   padding-left:10px;
}

<ul >
    <li>A</li>
    <li>B</li>
    <li>C</li>
</ul>

The advantage of this method is, that you don't need to give each <li> a class.

CodePudding user response：

I think both ways are okay, but what I would consider is, why should you have 10 li elements?

If you have some place where you have 10 li elements, then:

1. Probably you could map through array with values
2. Make seperate component :)