1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

VALID Order for CSS Elements?

Discussion in 'CSS' started by sitedesigner, Jun 4, 2009.

  1. #1
    Okay, so what is the official way to organize the css elements for a class or id?

    I always find myself putting the following elements in different orders every time. How do you organize them?

    background-image:
    width:
    height:

    Thanks!
    SEMrush
     
    sitedesigner, Jun 4, 2009 IP
    SEMrush
  2. qazu

    qazu Well-Known Member

    Messages:
    1,834
    Likes Received:
    62
    Best Answers:
    0
    Trophy Points:
    115
    #2
    There is no "official" way to order them so what ever works for you will do. By the way, you're referring to css properties, not css elements.
     
    qazu, Jun 5, 2009 IP
  3. customdesignsite

    customdesignsite Guest

    Messages:
    30
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yep there's no official order to them, you can make your own order, or follow one you find useful (firebug, css recognition tools)
     
    customdesignsite, Jun 12, 2009 IP
  4. babanesma

    babanesma Active Member

    Messages:
    26
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    66
    #4
    you can order them by the way that suits you .
    you can also gather the border elements , margin and padding , width and height , font elements ...

    note : the order you enter the elements will do nothing in how the browser see the elements , and process them .
    install firebug on firefox and you see the elements in order , you can see also that the browser process the padding then borders then margin for each elements , etc
     
    babanesma, Jun 12, 2009 IP
  5. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I think it is useful to have a system. When looking at my older css sheets, I could see where I'd done:
    #element {
    text-something;
    color;
    padding: 0 5px;
    background-something;
    margins;
    width;
    something else;
    padding-bottom: 50px;
    }

    When that padding gets listed twice. What a waste of code, but I hadn't seen it.

    Now I do this:

    #element {
    any clearing;
    any positioning, display states or floating;
    if abso-po;d, left and top here;
    width;
    height;
    margins;
    padding;
    color;
    the text and font stuff;
    backgrounds;
    borders;
    }

    I think it's easier on you to look for stuff later on if you pick a system and use it everywhere. You'll know where to look for all the widths for example, and no change of accidentally doubling your code.
     
    Stomme poes, Jun 17, 2009 IP
  6. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #6
    I just alphabetize them, that way they can't repeat as I'd have to add 2 beside each other, which is instantly noticeable.
     
    rochow, Jun 24, 2009 IP
  7. pipes

    pipes Prominent Member

    Messages:
    12,767
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #7
    As rochow mentions, alphabetically, i recently read that in a tutorial or article, some guy said he found it easier to look at it i think when he is looking at his CSS file and going back to edit etc.
     
    pipes, Jun 25, 2009 IP
  8. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #8
    Especially when editing someone else's work later on - hard enough as it is, let alone if its spread everywhere in some weird format that only makes sense to them.
     
    rochow, Jun 25, 2009 IP
    pipes likes this.
  9. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #9
    I could never work with alphabetising. I have trouble writing things in alphabetical order, always have to sit and think clearly... I have the same trouble with right and left, and east and west (but not north and south, lawlz). I double-think which side of something is left all the time.

    So I go by what's most important for my boxes.
     
    Stomme poes, Jul 1, 2009 IP
  10. pipes

    pipes Prominent Member

    Messages:
    12,767
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #10
    Are you joking or serious? :)
     
    pipes, Jul 1, 2009 IP
  11. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I'm serious. The order just isn't set in my head. I have to think about it. I mean, A and Z are pretty easy, but there are placed in the middle where I have to recite them.

    Left and right, I just need to sit a moment and think. It's not automatic. Though that's for sides-- if I'm moving forward and someone says "turn left" it's without thought. Moving through a map is also no problem. But when I'm setting CSS properties I often find myself defaulting to left, even when I was planning on float: right : )
     
    Stomme poes, Jul 1, 2009 IP
  12. pipes

    pipes Prominent Member

    Messages:
    12,767
    Likes Received:
    958
    Best Answers:
    0
    Trophy Points:
    360
    #12
    Thats interesting, while in motion your pretty much ok but stationary requires extra time.
     
    pipes, Jul 1, 2009 IP
  13. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #13
    It would be a bit of a time-waster to order things alphabetically
     
    wd_2k6, Jul 1, 2009 IP
  14. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #14
    Takes the exact amount of time, assuming you know the alphabet and can arrange things in your head :)
     
    rochow, Jul 1, 2009 IP
  15. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #15
    I don't tend to alphabetize because it often puts unrelated/unlike elements together... Width and height for example being at opposite ends of the alphabet.

    I prefer to group them in the classification order as follows:

    Uniques (list-style for example)
    Positioning
    Dimensions
    margin/padding
    text/font
    color/background
    borders

    That I do one property per line, and condense properties as much as possible this usually means the longest CSS element I write ends up maybe ten lines - if you can't keep track of ten lines with clear divisions between elements thanks to indentation then there's something really wrong. (meanwhile if you condense it all to one line in a nonsensical jumble you get what's coming to you!)
     
    deathshadow, Jul 3, 2009 IP
  16. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #16
    And when it's alphabetised, its extremely easy to read. Assuming you read from left to right, top to bottom, that is :)
     
    rochow, Jul 3, 2009 IP
  17. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #17
    So you find this jumbled mess:
    element {font:1em Arial;height:90px;list-style:none;position:absolute;right:245px;top:128px;width:145px}
    Code (markup):
    easier to read than:

    
    element {
    	list-style:none;
    	position:absolute;
    	top:128px;
    	right:245px;
    	width:145px;
    	height:90px;
    	font:normal 100%/140% arial,helvetica,sans-serif;
    }
    Code (markup):
    I don't get it. All one line is a jumbled mess that you cannot scan for properties quickly - putting it in alpha only makes it worse, since width isn't next to height, top only ends up next to right by coincidence, etc, etc... It's like the horrid code form those old 80's computing magazine "1 line basic program" competitions.
     
    deathshadow, Jul 3, 2009 IP
  18. rochow

    rochow Well-Known Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    190
    #18
    I can scan easily. I want width, I look to the end. I want height, I look towards the front. I want background it'll be up front also.

    2nd one is much harder. There isn't any "pattern" to it, it's merely "this is how I like doing it" - great for you, crap for anyone else trying to edit. Font is at the bottom, its location is set before its dimensions are set, etc... Alphabetised, its instantly obvious what the pattern is, and thus is easy to find where each property lies. I can't figure out this:

    based off what you have above. Especially because most developers just write it any-old-how, it looks exactly like that, and the assumption is it's merely everywhere. It would require reading multiple declarations to figure out that there is a pattern, and what the pattern is.

    Perhaps I'm just mega awesome at skim reading, but I fail to see how anybody could struggle to find a property in less than a second. It's easy peasy.

    Each to their own...
     
    rochow, Jul 3, 2009 IP
  19. markupdude

    markupdude Peon

    Messages:
    215
    Likes Received:
    6
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Ah this is interesting. I write my CSS in single lines as "rochow" does but i follow the position-dimention-margin/paddin-border-text-styling-background way similar to what "deathshadow" does.

    Thought a little spacing after each word like #id { margin: 10px 0; padding: 20px 0; } helps a lot in readability.
     
    markupdude, Jul 4, 2009 IP
  20. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,136
    Likes Received:
    1,697
    Best Answers:
    239
    Trophy Points:
    515
    #20
    I think you are (somehow) even less punctuation blind than I am. All one line I have difficulty telling : from ; and as such cannot tell what's a value and what's a property. It all blurs together and I can't tell anything apart.

    Especially without spaces between elements. Though it could be worse, what I really hate is this:

    height: 90px;list-style: none;position: absolute;

    Becuase my brain wants to say that 90px has the value list-style, none has the value position, etc, etc. or this:

    height: 90px; list-style: none; position: absolute;

    Since you can't clearly tell what goes with what.

    At LEAST if you put it on one line, put the spaces BETWEEN elements.

    height:90px; list-style:none; position:absolute;

    It's still a pain in the ass, but at least you can tell where each property begins.
     
    deathshadow, Jul 4, 2009 IP