Best way to provide id and classes in html

Question

So, let's say that we have a large project with a large number of pages, and we need to add one html page to it.

After creating the page, I saw that some of the id and classes that I use are displayed on other pages as well. So providing css styles for this id poses huge problems for me. So, what is the best way to give id and classes, so that the probability of doubling in the project will be the least?

One way is to add the page name to the attribute. So instead

id="button" 

will have

 id="mypage-button" 

But in this way id and classes become more and less readable. Another approach is to give the full path to this component in CSS and minimize the likelihood of doubling identifiers. For example, instead of providing in CSS

 #myTable { height:300px; } 

Now i will give

 #myBigDiv > #AnotherDiv .tables #myTable { height:300px; } 

But this path is slower, and I will quickly lose speed. Placing my own css file on my page does not solve the problem, because the presence of some written property that I do not know has some other property (for example, margin) specified in the css files that are indicated in the layout. What do you think is the best way to do this?

Answer 1

One way is to add the class to the body tag. So in the example above you use

 .myPage #button {} 

Answer 2

I personally like to use the global.css file, forms.css, and then split the CSS files for individual pages containing special CSS for this page. You can then add a simple function to add these pages to your business.

Answer 3

how about a few classes like class="button page1" using the second class to indicate the page (it’s easier to create an automatic page creation) and then in css using a combination of id and classes

 #button1.page1{ somestyle } 

it is even better to use scss to write css - it would be much easier for a site with multiple pages