#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0

    A matter of efficiency: Advanced class inheritance?


    Hi thanks for reading. I already know the basics of class inheritance and have been using it. Such as in the following:
    PHP Code:
    .myclass {
    stuff;
    }

    .
    myclass h1 {
    stuff;
    }

    .
    myclass div{
    stuff;

    I've recently come into a situation that, using the above class skills that I have, gives me a result that seems dreadfully inefficient...

    I have a series of four columns all with the same properties. The only catch is, the first one does not need a margin, but the rest of them do. This is my code:
    PHP Code:
    .infosect {
        
    float:left;
        
    width:231px;
        
    height:270px;
    }

    .
    infosect header {
        
    margin-bottom:20px;
        
    padding:34px 0px 0px 11px;
        
    width:220px;
        
    height:30px;
        
    border-bottom:1px solid #cccccc;
    }

    .
    infosect h1 {
        
    font-family:os-regular;
        
    font-size:13px;
        
    color:#999999;
    }

    .
    infosect_indent {
        
    float:left;
        
    margin-left:24px;
        
    width:231px;
        
    height:270px;
    }

    .
    infosect_indent header {
        
    margin-bottom:20px;
        
    padding:34px 0px 0px 11px;
        
    width:220px;
        
    height:30px;
        
    border-bottom:1px solid #cccccc;
    }

    .
    infosect_indent h1 {
        
    font-family:os-regular;
        
    font-size:13px;
        
    color:#999999;

    As you can see, the header and h1 inherited classes have the exact same properties for both. It just feels so wasteful to have to define a class that's the exact same as another one. What would be the most efficient way to handle this situation?

    PHP Code:
    .infosect, .infosect_indent h1 {
        
    font-family:os-regular;
        
    font-size:13px;
        
    color:#999999;

    Is there something like this possible? I cannot seem to find any information.

    Thank you ever so much for shedding some light.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    There are a couple of ways to handle when two things are mostly the same, but slightly different.

    One way would be to define all the common stuff first, then the differences:

    Code:
    .infosect, .infosect_indent {
        float:left;
        width:231px;
        height:270px; 
    }
    .infosect_indent {
        margin-left:24px; 
    }
    Or, you could use two classnames:

    Code:
    <!-- html -->
    <div class="infosect">stuff here</div>
    <div class="infosect indent">stuff here</div>
    
    /* css */
    .infosect {
        float:left;
        width:231px;
        height:270px; 
    }
    .indent {
        margin-left:24px; 
    }

    Comments on this post

    • Jiketsu agrees : Thanks (I have no rep to add to you but not sure if agreeing with your post helps anyway)
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0
    That was very clear; thank you kindly.

    This does not seem to work though?
    PHP Code:
    .infosect, .infosect_indent header {
        
    margin-bottom:20px;
        
    padding:34px 0px 0px 11px;
        
    width:220px;
        
    height:30px;
        
    border-bottom:1px solid #cccccc;

    Is it not possible?
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Dec 2003
    Posts
    709
    Rep Power
    441
    If you're trying to style the header for both, you've got to spell that out in the CSS. The code you have styles the header in infosect_indent, and just the infosect class itself.

    It should be:

    Code:
    .infosect header, .infosect_indent header {
    /* your code */
    }
  8. #5
  9. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Sep 2013
    Posts
    16
    Rep Power
    0
    Ahhh! That's why it was not working. Okay, okay I get it.

    Thanks a tonne!

IMN logo majestic logo threadwatch logo seochat tools logo