Web Analytics Made Easy -
StatCounter css organization question - CodingForum

Announcement

Collapse
No announcement yet.

css organization question

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • css organization question

    Hey,

    if i have the following setup:
    Code:
    #intro {
    margin-left: 205px;
    margin-top: -25px
    }
    #mainLogo {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    height: 315px;
    width: 417px;
    padding: 20px;
    }
    ...
    <div id="intro">
    	<div id="mainLogo"><img src="images/happy.gif"></div>
    </div>
    is there any way to code the css according to the heirarchy in the html?

    say like
    Code:
    #intro {
    margin-left: 205px;
    margin-top: -25px
    }
    #intro #mainLogo {
    display: block;
    ...
    so that when someone is reading the CSS they know that #mainlogo is a child of #intro?... and would i even want to bother?
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #2
    I wouldn't bother since you can only have one id per page. Now if this element was to change in styles constantly then you might put a class in a certain parent element or something but if its not going to change I say let it be since you can only have one id. It would be different if it was a class.
    ||||If you are getting paid to do a job, don't ask for help on it!||||

    Comment


    • #3
      good point ... but if it were a class, how would i do it?

      I inquired because, upon reflection, it seems that various coding errors i make are the result of changing a parent attribute that in turn affects the child but I end up forgetting about the hierarchy and losing hours trying to figure it out

      i figured if I took the extra 5 seconds to give myself a visual breakdown of what can affect what, i may save myself more time in the end(?)

      so yea, although i may not do it, how would it be done?
      Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

      Comment


      • #4
        Just look at it this way. The more specific you get, the more of a chance you have of the new specific style to override the less specific style. So for example, you want all divs with class="square" to be red with a 1px border but you want one of the square divs that is the only one in your intro div to be blue instead of red.
        Code:
        <div id="container">
        <div class="square">blah</div>
        <div class="square">blah</div>
        <div class="square">blah</div>
        <div id="intro"><div class="square">blah</div></div>
        </div>
        Code:
        #container .square {
        background:red;
        border:1px solid #000;
        width:300px;
        height:300px;
        }
        #container #intro .square {
        background:blue;
        }
        The more specific one overrides the less specific one.
        ||||If you are getting paid to do a job, don't ask for help on it!||||

        Comment


        • #5
          this may sound stupid... but what exactly do you mean by specific

          perhaps its because its 1am, but that word is confusing me in the context of "more specific overriding less specific"
          Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

          Comment


          • #6
            Just look at the example. The more cascading you get the more overriding you have.
            ||||If you are getting paid to do a job, don't ask for help on it!||||

            Comment

            Working...
            X