50+ CSS Best Practices and Coding Guidelines

Discussion in 'CSS' started by mariuspompier, Nov 13, 2007.

  1. clinton

    clinton Well-Known Member

    Messages:
    2,166
    Likes Received:
    44
    Best Answers:
    0
    Trophy Points:
    110
    #21
    This is the only way for me, indenting, in my opinion, is the best way to keep your code sorted and readable.

    And really, shoot me down before convincing me that indenting makes code harder to read or to find. Indenting is one of the things that keeps me from pulling out my hair every time I look for a simple block of code. Also, it shows that your organised;)
    
    #container 
            {
    	min-width:740px;
    	max-width:992px;
    	margin:1px auto 1em;
    	overflow:hidden;
    	position:relative;
    	text-align:left; /* return to normal behavior after IE fix*/
    	background:#FFF;
    	border:1px solid #000;
            }
    
    Code (markup):
     
    clinton, Nov 15, 2007 IP
  2. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #22
    Considering its what 99.99% of people do (and there are only 2 ways of doing it), no, it doesn't at all.

    When you have 150+ ID's and classes, horizontal means going through 150ish lines to find the right ID, and vertical... christ, like 700+... thats alot of scrolling just to find 1 ID, have fun with that!
     
    rochow, Nov 15, 2007 IP
  3. soulscratch

    soulscratch Well-Known Member

    Messages:
    964
    Likes Received:
    45
    Best Answers:
    0
    Trophy Points:
    155
    #23
    I don't bother scrolling to find selectors anymore. It's just a waste of time (so is using a mouse when coding). I know the values I gave for my elements for the ID and CLASS attributes, so instead of wasting time I type "/#id" or "/.class" + enter and I'm on the line with the selector, hit o which makes a new line and automatically converts to insert mode, and type away.

    Vim FTW.
     
    soulscratch, Nov 15, 2007 IP
  4. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #24
    ^ plus sed for when the boss decides to change every instance of NewProduct to Super NewProduct...
     
    Stomme poes, Nov 15, 2007 IP
  5. deathshadow

    deathshadow Acclaimed Member

    Messages:
    9,732
    Likes Received:
    1,999
    Best Answers:
    253
    Trophy Points:
    515
    #25
    ctrl-f

    Which beats the hell out of trying to scroll sideways to figure out what properties are even declared - assuming you can make them out in that jumble... Much less that if you only have 700 lines for 150 classes, you probably have too many classes and not enough properties declared since my average seems to be double that.

    I think it comes down to does one spend more time looking at the id/class/tag declarations, or at the properties declared therin.
     
    deathshadow, Nov 16, 2007 IP
  6. rochow

    rochow Notable Member

    Messages:
    3,991
    Likes Received:
    245
    Best Answers:
    0
    Trophy Points:
    240
    #26

    I was picking random numbers :p

    And no scrolling sideways required. I read books top to bottom, left to right, but maybe I'm just the odd one out.
     
    rochow, Nov 16, 2007 IP
  7. mariuspompier

    mariuspompier Peon

    Messages:
    323
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    0
    #27
    The best way is to segment your css file into parts from your design.. like header, menu, body, footer.. this way you go when you have a problem on the menu on the menu part and the search is less to do.
    Everything will go smooth and less time waisting if you are well organized.
     
    mariuspompier, Dec 13, 2007 IP
  8. midwestbonsai

    midwestbonsai Well-Known Member

    Messages:
    402
    Likes Received:
    9
    Best Answers:
    0
    Trophy Points:
    105
    #28
    Great list, thanks
     
    midwestbonsai, Dec 14, 2007 IP