CODEWITHSUNDEEP
csshtml
Manoj
Manoj

Reputation: 275

How can I make a same class name unique to different pages

I am using single CSS file for all my pages, but I come across with this problem. I have an almost identical (with minor differences) element on two different pages ( let's say home page and about page; This is my CSS codes for a specific element in the Home page, I want to use this for another page with minor differences. How do I name those two classes,

  1. Do I need to use completely separate class names like .home.topcontainer { and .about.topcontainer { etc, or is there any robust way handling this issue?

  2. What is the best way of naming CSS blocks for different pages, if I am using a single CSS file for my whole website to avoid me get confused over class names?

Thanks

CSS 

.top_container {
position:relative;
top:3px;
height:144px;
z-index:1;
background-color: #143952;
width: 90%;
left:5%;
right:5%;
font-family: 'Scope One', serif;
overflow:hidden;
min-width:900px;

Upvotes: 1

Views: 7483

Answers (7)

Pratik
Pratik

Reputation: 126

If there are same elements on both pages such as Header then you can use the same class name for them on both pages so that they will look exactly identical on both pages. And for making some changes to those elements you can use different CSS selectors. In the below given code, I have used class and id as selectors.

I HOPE THIS ANSWER MEETS YOUR REQUIRMENTS.

Homepage: header background color is blue.

    <header class="top_container" id="home_header">
      <!--YOUR WEBSITE HEADER-->
      <h1>TITLE</h1>
    </header>
    <div>
      <!--YOUR SITE CONTENT-->
    </div>

About page: header background color is red

        <header class="top_container" id="about_header">
          <!--YOUR WEBSITE HEADER-->
          <h1>TITLE</h1>
        </header>
        <div>
          <!--YOUR SITE CONTENT-->
        </div>

CSS file:

.top_container{
  background-color: blue;
  color: white;
}
#about_header{
  background-color: red;
}

Upvotes: 1

user3771102
user3771102

Reputation: 558

From what I learned in coding scss, it is better to make your class name a general one. In css only you can make it like this:

CSS

.top-container{
 width: 100%;
}

.top-container.about{
width:60%
}

.top-container.contact{
width:30%
}

HTML

home.html

<div class="top-container"></div>

about.html

<div class="top-container about"></div>

contact.html

<div class="top-container contact"></div>

The about class will override whatever style you have in top-container. So its easy to use, short and quite simple. You can use this in making your class name a more general one.

Upvotes: 1

Michael Coker
Michael Coker

Reputation: 53684

I add the page name to the body class, and make changes like that using CSS like

.style {
  margin: 0;
}

.home .style {
  margin: 10px;
}

Upvotes: 1

Manish Joy
Manish Joy

Reputation: 486

The best practice is to add some relevant class in body tag (as you can see in several CMS like magento etc.) and then use like this:

<body class="home">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

--or--

<body class="about">
    <div class="top_container">
        <!-- Do something -->
    </div>
</body>

now you can use css like:

.home .top_container{}

.about .top_container{}

Upvotes: 4

caramba
caramba

Reputation: 22480

I would do like so. Cause you might have a .top-container on every page you need to set like a "default" style for .top-container. So CSS Cascading Style Sheet. Cascade from top and if an element needs to be a little different just set the differences in a more specific defined class. Something like so:

.top-container {
    /* apply all styles for .top-container */
}

.home.top-container {
    /* this .top-container will have all styles from .top-container defined above */
    /* so only define all DIFFERENT things for .home.top-container here */
}

.about.top-container {
    /* define all DIFFERENT things for .about.top-container here */
    /* like before it will always have the .top-container styles */
}

Upvotes: 0

Esko
Esko

Reputation: 4207

Commonly used practice here is to use a base class and a variation to that base class. That way we use the base css-class for both elements and change it a little by overwriting some values with the variant-class. You didn't specify how you want the top containter to change but here is an example:

.top_container {
  background: #000;
  color: #fff;
  width: 200px;
  height: 50px;
  padding: 10px;
}

.top_container.top_container--narrow {
  width: 100px;
}
<div class="top_container">
  Default
</div>
<div class="top_container top_container--narrow">
   Narrow
</div>

Upvotes: 1

Ashil John
Ashil John

Reputation: 7762

Let's assume this is your Home page

<div id="home">
  <div class="top_container">
     //stuff
  </div>
</div>

And this is your about page:

<div id="about">
  <div class="top_container top_container_about">
     //stuff
  </div>
</div>

Now, in your CSS file, add the style for the 'top_container' class like so:

.top_container {
    //css styles common to the top_container element
}

And then write the style that's unique to the top_container in the about section:

.top_container_about {
        //css style unique to the about section
    }

This is one way which takes advantage of the 'Cascading' property of a 'Cascading Style Sheet'.

Upvotes: 1

Related Questions