BEM CSS Syntax

[lewismorris]

Hi Guys,

I propose that we move forward with introducing BEM as our standard syntax when writing CSS.

I know a few guys are using BEM already but if not i've included a few links below which should cover the ins and outs. Any suggestions for different syntaxes are welcome.

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://bem.info/

[timgale]

Hey guys

Just to follow on from Lewis's proposal, it might be worth looking into various CSS design patterns in order to establish flexible naming conventions.

One approach that might be worth exploring is Atomic Design; a methodology that employs the principles of BEM to gradually build up content blocks by combining standalone, abstract elements.

http://bradfrostweb.com/blog/post/atomic-web-design/ http://coding.smashingmagazine.com/2013/08/02/other-interface-atomic-design-sass/

[BenjaminRCooper]

I agree with you both, I definitely think it is the way to go.

Regarding the atomic design patten, I think it is a great idea, but as you know Tim, I'm not a fan of the general category naming conventions. If we could use this approach but come up with conventions which are more understandable and future proof, I think that would be the best option.

Just to add, when you are all adding issues, could you try to include a suggested standard in the format I proposed in issue #1 please if possible.

[iamrossgrant]

Hey guys,

Sorry I've not commented much yet but I'm following it all via email throughout the day.

I like BEM, I work in a similar way where possible.

One point I'd like to make before we get too far down the line, and please tell me where to go if you all think I'm wrong, but I feel that we need to agree on a base standard of css first before we look to move to include patterns. So in our case I think we need to agree upon and implement standards for how we will write SASS / SCSS (preference depending) and get that nailed on before we move to using new patterns / frameworks.

Sorry this doesn't follow the suggested format Ben, you're welcome to reprimand me in due course :-)

[timgale]

Hey

I revisited one of Nicolas Gallagher's articles regarding front-end architecture and thought it could provide food for thought regarding our approach to naming conventions. There are some interesting points around content agnostic class names using BEM style modifiers etc. Could be worth a read.

http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Tim

[BenjaminRCooper]

Evening mate,

I re-read this article a few weeks back because I love the depth Gallegher goes into.

With the content agnostic class name approach, I am totally onboard, been trying to do this ever since I converted to BEM.

With that said, it is probably one of the hardest things I do on a daily basis, and having consistant, understandable naming rules is going to take time.

Naming classes is so difficult, but I think if we can come up with generic module names which we all understand e.g media and flag objects, it would be awesome.

Ben

[timgale]

Hey man

I completely agree that decoupling class definitions and content can be troublesome, and maintaining this abstract approach to adapt for any unknown unknowns could cause issues. This is partly the reason I proposed looking into an Atomic Design approach.

As you say, perfecting this will come with time once our boilerplate and goto module names are established.

Tim

[BenjaminRCooper]

Afternoon mate,

Do you think Atomic Design would help in this aspect?

Ben

[markgoodyear]

Hey guys,

Just to give my opinion, we've tried atomic design for Sass structure here of a couple of projects and it's worked pretty well. I have a repo with it set up: https://github.com/markgoodyear/Static-Starter/tree/master/src/assets/css. It's based off Inuit and probably could do with tweaking to get it perfected, but it might be of use.

Mark

[BenjaminRCooper]

Morning Mark,

Hope you are good.

Tim mentioned Atomic Design too, but I am not too sure regarding the naming conventions.

I really like the idea behind it, but it would be great if we could use a similar approach without the scientific terms.

One approach I do like which the concept uses is Utilities.

If we could adapt sections of this approach, and cater it for the team, as well as thinking about new starters of all levels, that would be great.

Ben

[BenjaminRCooper]

Implemented as a standard within Presentation - General #28