search

dolfelt / scheduler-js

Simple scheduling app using Mithril, ES6, and the When I Work API.
http://wheniwork.com
MIT License
2 stars 0 forks source link

Style Organization #4

Open ameech opened 9 years ago

ameech commented 9 years ago

What do you guys think about organizing our styles like this: http://sass-guidelin.es/#architecture, specifically this directory/file structure: http://sass-guidelin.es/#the-7-1-pattern

Also, what are you thoughts on using BEM for our style naming convention?

I've used these in the past and have found them quite scalable and easy enough to understand. They take a bit of discipline, but I think that's a fair trade off for less duplication and having any developer able to understand how the styles work.

Note: This may be out of the scope for this repository, not sure how deeply we want to dive into styling.

@curtis1000 @dolfelt @shadowhand

curtis1000 commented 9 years ago

The 7-1 Pattern looks good to me.

BEM looks like a decent way to allow class names to be self-documenting, seems like it could improve organization.

shadowhand commented 9 years ago

I'm not a huge fan of underscores in CSS classes, but I like the organization this has. Perhaps modifying the rules so that btn-orange would be a modifier and btn--price would be an element?

ameech commented 9 years ago

I'm fine with that, not a big fan of underscores either.

ameech commented 9 years ago

@dolfelt any thoughts on this?

dolfelt commented 9 years ago

@ameech Looking at the BEM style, I'm not sure it's completely necessary. Using Sass I think gets us part of the way there. Obviously we should still have conventions, but maybe BEM is a little far reaching.

shadowhand commented 9 years ago

Are we going to use Bootstrap 4? I think we should!

dolfelt commented 9 years ago

@shadowhand I don't think we should use Bootstrap in it's entirety. Right now I'm leaning towards only their grid styles, and perhaps their button/form styles. I'd like to keep it to a minimum since the style will always be custom.

dolfelt commented 9 years ago

Although looking at BS4, I'm impressed. Sass based, flex-box layout on the fly if we want it. Very nice! Even still, I'd want to pick and choose what works for us, and throw out (or stop using) what we find we are overriding most of.

ameech commented 9 years ago

Going back to the your previous comment @dolfelt, in what way does Sass get us part way there? By being able to nest?

I like the idea of using something like BEM as it gives us a document we can reference when new devs are onboarding as well as something we can hold each other accountable too. Also makes us think about how we are implementing styles instead of just tossing them in a file.

Also, I can't wait for BS4 to be released with flex-box support.

dolfelt commented 9 years ago

Yeah, I think nesting cleans things up really well. Also, for understanding of styles, there's always sourcemaps. Speaking of, we should add those to the gulp file.

ameech commented 9 years ago

We use nesting now and it's not so clean. Sourcemaps are great, but sometimes it's nice when things are obvious and don't need tools to understand what's going on.

shadowhand commented 9 years ago

@dolfelt right, if we use BS mixins we can pick and choose what parts we want to use and which to skip.