CSS How do you organize your CSS?

Discussion in 'HTML, CSS & JavaScript' started by m0nstaLulz, Dec 12, 2015.

  1. m0nstaLulz

    m0nstaLulz Aspirant

    45
    13
    +6
    How do you organize your CSS?

    Do just put it all in one big file without organization?

    Do you seperate each section with comments?

    Do indent sub classes?
    For example:
    Code:
    .buttonOuter { }
        .buttonInner { }
            .buttonText {}
    I seperate each section with comments and sometimes indent each subclass.

    How do you syntax your CSS?
    Code:
    .classHere
    {
    
    }
    or
    Code:
    .classHere {
    
    }
    or
    Code:
    .classHere { }
    I tend to use the 2nd one when I have a lot of declarations and the 3rd one with one or two declarations.
     
  2. ozzy47

    ozzy47 Tazmanian Veteran

    9,137
    832
    +4,320
    I tend to do it like this:

    Code:
    /* Start scroll bar in quotes */
    .bbcode_container div.bbcode_quote div.message {
        max-height:300px;
        width:auto;
        overflow:auto;
    }
    /* End scroll bar in quotes */
    That way I can easily see what each entry does when I look at my CSS file. ;)
     
  3. r3v0lution

    r3v0lution Enthusiast

    135
    58
    +48
    Definitely this!! I do not yet have the talent to look at every entry in a css file and know what it affects, so I comment on each entry to save my sanity.
     
  4. rafalp

    rafalp Desu Ex

    1,168
    707
    +352
    These days I prefer Bootstrap's approach of css files dedicated to components/pages/domains that I concat and minify via gulp task. Keeps css files thin and separated in dev, but takes some self-discipline for them to stay that way.
     
  5. Nutt

    Nutt Coder/Designer

    400
    135
    +20
    I'm a big fan of SASS. Makes it pretty easy to keep stuff separated and can compile it all into a minified style file when it's ready.
     
    • Informative! Informative! x 1
    • List
  6. Norton

    Norton Neophyte

    2
    6
    +0
    I'm a new forum Founder/Owner (original founder passed away last year) and know absolutely nothing about CSS; but I would love to learn the procedure. Is there a Tutorial for Dummies?
    I see some wonderful CSS coding on this forum that would be useful but I have no idea how to enter the scripts in my forum CCS sheet.
    Our forum CSS contains 175 lines of script code, can I just copy suggestions that are of interest that I see on this forum and paste into my own CSS?
    Where would I paste the script, after line 175?
    Help!
    NortonNorton
     
  7. rafalp

    rafalp Desu Ex

    1,168
    707
    +352
    First off, the CSS is not programming or scripting language. Its style description language. There is no execution happening in CSS, only css selectors selecting elements on page and assinging them sets of styles:

    Code:
    h1 {
        color: #f00;
        font-size: 20px;
    }
    
    This CSS means "all h1 elements text should be red and 20 pixels tall".

    If you just copy and paste CSS from this thread into your CSS, its unlikely to work, as its selectors will not match any elements on your page, or their styles will have undesirable effect on elements matched.
     
  8. Norton

    Norton Neophyte

    2
    6
    +0
    YES WE NYAN Thanks! But you are conversing with a CSS Dummy. LOL
    How do I change avatars on my forum from square to circular. Do I enter the code at line (see orig. post) 176 in my current CSS, or do I create a completely new. I dont want to cause any major Oops!
    Maybe the best solution would be to leave this as is, however you don't learn new techniques or skills by the hands off approach.
     
  9. TranslaCloud

    TranslaCloud Aspirant

    18
    8
    +1
    I agree :D :D
     
  10. rafalp

    rafalp Desu Ex

    1,168
    707
    +352
  11. Na11

    Na11 Neophyte

    8
    3
    +2
    Like this:
    Code:
    /*Body*/
    ENTER STUFF HERE 
    /*Body*/
    
     
    • Pure Genius! Pure Genius! x 1
    • List
  12. martindam

    martindam Aspirant

    15
    1
    +2
    The more perplexing formats I make, and the more I move far from inline styles, the all the more bewilderingly long my css records move toward becoming. It's a genuine profitability executioner when you need to look over 1000 classes to locate the one you need, or stop and start up the "discover" instrument to do it for you.
     
  13. the ceo

    the ceo Aspirant

    11
    6
    +3
    i agree with you
     
  14. Transfor

    Transfor Neophyte

    8
    8
    +1
    BEM use
     
Verification:
Draft saved Draft deleted
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.