DEV Community

Discussion on: For front-end development, how do your organise your code (outside of a framework), and what tools do you use to manage it?

Collapse
 
sebnitu profile image
Sebastian Nitu • Edited

I organize everything in a src folder that would container css, js, svg and any other directories of files that need to be "processed" in some way. All processed files go into the dist root directory.

My JavaScript, I write in ES6 and use rollup to transpile (babel plugin) and bundle the final format in a minified iife file.

As for styles, I use Sass and write in BEM methodology. That way each .scss file would be it's own component with maybe a single _global.scss file for just general styles. It's pretty rare that I'll need random general styles tho.

For task runners, I just use NPM scripts. I've been using Gulp for a few years but dropped it recently in favor of NPM cause I can just write most of my tasks using packages directly without the added layer of a task runner. So for example, my Sass script looks like this:

"styles:compile": "sass src/css/app.scss dist/styles.css --load-path node_modules",

Last thing I'll add is I take a slightly different approach if I'm writing a component I plan to reuse or include in my component library. That's when I use this concept:

Separation of concerns

Here's an example of that concept in my component library where I use Lerna to manage.