I'd follow a modular approach. Check out Terrific Nitro. It's one of the best ways to work modular in combination with Atom-Design.

I use declaring my objects, classes and ids in alphabetical order. First every object with no class nor id and then the classes and finally ids. Also every line of css ordered in alphabetical order so you can easily see if it was declared a rule before and not repeating it and overwrite it. I found that way to be easier to read, find objects and classes when working in groups

It's a team matter. The way your team feels comfortable to collaborate, it's the way it should be. And of course if you're using BEM o SMACSS you'll organize your css according to it. I use SASS as my css preprocessor and I have always 3 main folders:

• Vendor
• Helpers
• Modules

Each of them has a *_{foldername}.scss* and so on, that import the files of this folder that I will use; in that way in my main.scss or style.scss I only have to import one file per folder. And in the root "styles" folder a always has a _fix.scss when I'm using a framework, so I can put simple "Fixes" in it.

The way i write my css is as @xirclebox said: from top to bottom in order as the elements appear on my html, so I can navigate in my styles and HTML in the same way.

PD: Apologies for my english :D

I recommend looking into SMACSS which gives a great structure for your CSS: smacss.com

With LESS I divided my styles in different stylesheets which were imported into one main LESS file and it was divided something like this:

• Reset/normalize
• Variables and mixins
• Generic styling (fonts, headers, lists, tables etc,)
• Basic layout (basic styling/positioning for header, main, aside, footer, styling for a grid system etc.)
• Components
• Plugin styles (usually 3rd party)
• Media queries
• Print styles (depending on the complexity, you can include it in the LESS or keep it seperate. I now tend to keep it seperate)

Because I worked with more Front End Developers, we had this structure for each project, which made it a whole lot easier to fix and add new things.

In my new job I don' t have a preprocessor and I'm the only Front End Developer, but I keep the same structure as above, but then in a single CSS file. At the top there's a Table of Contents (as comments obviously) and I can use that to search for a specific part or component.

But that's just how I work (and worked)

There are a lot of frameworks out there, but don't follow them blindly. And the naming conventions too. BEM, SMACSS, ITCSS, ACSS, OOCSS... it's all good if you (and your team!) stick to one of these though.

Just don't linger on it too much. In the end it only matters if you write correct CSS which works in most of the browsers ;) . The structure and naming is secondary I think. In the 15 years I've been building websites, no CSS file has ever gotten me in a situation that I couldn't edit it or find a particular selector.

CTRL-F is your friend ;)

I typically arrange the elements of my css files in order of appearance or "top down". Header styles at the top, body in the center, and footer at the bottom. This allows anyone else who may need to edit the file after me to follow along as they traverse the page.

For me, since I use a javascript framework and a modular one, modular makes sense. If I have a fooView, I just namespace css foo.css and the class for the view .foo-view. This solution has been enough for me, even in big projects.

You have other ideas around internet like BEM for example.

Well you wrote CSS so I will assume that preprocessor advice wouldn't be helpful.

When I think of organizing CSS I always think of this: cssguidelin.es

I hope that helps you!