32 comments

  • Clark WimberlyClark Wimberly, 6 years ago

    I carefully and meticulously think about structure and order and then start with a well-thought plan where I SHAKE IT UP AND THROW THAT SHIT OUT THE WINDOW WHILE GOING TO TOWNNNN

    53 points
  • Jason MelgozaJason Melgoza, 6 years ago

    I always dug Mark Otto's guide to CSS, it's usually the way I roll.

    http://codeguide.co/#css

    7 points
    • Dan Charlesworth, 6 years ago

      Yep. Really hard to argue with any of these rules for me, though I tend to prefer a 4-space indent.

      0 points
    • Arun KP, 6 years ago

      Always believe in this.

      2 points
    • Toby StewardToby Steward, 6 years ago

      2 space tabs? No way; 4 all the way. Makes code much more readable.

      2 points
      • Ivan PrignanoIvan Prignano, 6 years ago

        It depends from the environment you're used to work in: Ruby has a 2-space tab convention, which becomes consistent (which is the main point here) across the entire project when working with Rails.

        2 points
    • Tom DurkinTom Durkin, 6 years ago

      This is great, thanks for sharing!

      2 points
    • Nate van der EndeNate van der Ende, 6 years ago

      Like this a lot, although I've been alphabetising my declarations and I find it so useful.

      0 points
      • Filipe FigueiredoFilipe Figueiredo, 6 years ago

        That's how I do it too. Most of the article are rules I've followed for longer than I remember, but I don't (normally) group up related declarations, always alphabetize. Easier to read.

        I do however group position declarations such as top and bottom, they always come after a position declaration with an added indent. Don't know where or why I picked this up, but I like it.

        0 points
      • Nate vNate v, 6 years ago

        Dig your name holmes. ;)

        0 points
  • Chris ColemanChris Coleman, 6 years ago

    Keep the properties that make sense together and don't obsess over the exact order. Group them something like this:

    postioning box model text font etc.

    Whatever. Don't obsess, just get it done. When you have the opportunity to go back and refactor, then you can worry about getting it right.

    If you're going to obsess over anything, obsess over your selectors. Changing those later is a lot harder.

    2 points
  • Ian DonahueIan Donahue, over 6 years ago

    I really like Harry Roberts guide.

    http://cssguidelin.es/

    Its a great

    1 point
  • Diederik EenschootenDiederik Eenschooten, 6 years ago

    ah cmon there are hundreds of posts like this one

    1 point
    • Account deleted 6 years ago

      But think of all the points! Agreed, but I don't think DN regulates if something has been posted before, like Reddit mods.

      0 points
  • Dimitri NicolasDimitri Nicolas, 6 years ago

    For all my projects, I use Sass and BEM notation for classes. The organization of my files/folders is here : https://github.com/dimitrinicolas/marmwork/tree/master/source

    1 point
  • Greg BowenGreg Bowen, 6 years ago

    The things I edit the most towards the top, the things that I edit the least towards the bottom.

    1 point
  • Matt SoriaMatt Soria, 6 years ago

    I order by line-length. I wrote a response to Chris's post because I was surprised that I seemed to be almost alone: http://mattsoria.com/blog/2-of-web-developers-order-css-like-me

    1 point
  • Alec LomasAlec Lomas, 6 years ago (edited 6 years ago )

    Sass mixins, extends, & functions >

    Sizing >

    Positioning >

    Visual Styling >

    Nested Selectors (BEM stuff/:psuedo-selectors only), where the order is repeated

    1 point
    • Cole RobertsCole Roberts, 6 years ago (edited 6 years ago )

      We have a very similar style. I write mine like this:

      Sass mixins, extends, & functions >

      Positioning >

      Sizing >

      Visual Styling >

      Nested Selectors (BEM stuff/:psuedo-selectors only), where the order is repeated

      1 point
  • Account deleted 6 years ago (edited 6 years ago )

    LESS, line length, dashes (not underscores)

    :)

    1 point
  • Kurt Cunningham, 6 years ago

    The designers at LaunchPad Lab currently write in alphabetical order. However, since we primarily write Sass, we are adjusting that order now to accommodate Sass functions and such.

    1 point
    • Darren Krape, 6 years ago

      I second alphabetical. I feel like it is the only method that is immediately apparent and completely understandable and apparent, regardless who coded it. Obviously this isn't perfect, as I think to myself every time I type "height" and "width" 10 lines apart. But at least I always know where to look for them..

      Of course, now that I'm using SASS now, I'm having to adjust that as you mentioned.

      As an aside, 39% answered "Randomly"? Yikes, I hope I'm never the next person who works on their CSS.

      2 points
  • Brian A.Brian A., over 6 years ago (edited over 6 years ago )

    I loosely work off the BEM model, but always with double dashes (double underscores are bullshit). The OCD in me wants to order my declarations by line length, but in reality, it goes Sizing → Positioning → Styling.

    I used to just wing it, but having some sort of organized base for my code helps keep the mind clear and the code flowing.

    0 points
  • Ian WilliamsIan Williams, 6 years ago

    We've been using AM for our styles on our most recent app. http://glenmaddern.com/articles/introducing-am-css

    It's been super duper helpful when you need helper styles like "float:left" or "overflow-y:scroll" and don't want to make a block/module for each damn variance of a style.

    We try to stick to: - Base (layout, typography, variables) - Components (inputs,buttons, etc) - and Modules (header, video)

    That folder structure combined with the ability to throw helper styles in there, and not end up with a 3 line long class list is an easy way to stay sane.

    0 points
  • Jørgen Arnor LomJørgen Arnor Lom, 6 years ago

    I'm currently basing my larger projects on DoCSSa (Deferred object CSS architecture), and it really does wonders in keeping them maintainable and DRY.

    DoCSSa, despite it's name, is based on SCSS, and uses BEM-style naming conventions.

    0 points
  • Benjamin CharityBenjamin Charity, 6 years ago (edited 6 years ago )

    For coding style I follow these guidelines. (tl;dr: module based, bem)

    The file structure would look something like:

    /home _extends.scss _home.scss /global _extends.scss _navbar.scss _navpanel.scss /queue ... main.scss
    0 points
  • Evan MoreauEvan Moreau, 6 years ago

    Are you guys organizing as you write or do you go back and clean up?

    I find that for me, it feels more organic to just go go go and then loop back and clean it up. Though, I I'll admit, I haven't given much effort in using Mark Otto's guide.

    0 points
  • Richard Oliver BrayRichard Oliver Bray, 6 years ago

    I usually have a contents section like so; https://coderwall.com/p/qsqqhw/organise-your-code?p=1&q=author%3Aceiga

    0 points
  • Sasha MSasha M, over 6 years ago

    My styleguide very similar to @mdo http://markdotto.com/2014/07/23/githubs-css/ Of course, with Sass. CSS architecture is based on BEM and OOCSS — it works well on projects of any size.

    0 points
  • Deryck HensonDeryck Henson, 6 years ago

    Given that I started out most of my CSS madness in Drupal (and thus under the Drupal Coding Standards ), the alphabetical approach is normally default if I can remember to do it.

    0 points