search

Vizzuality / style-guide

Vizzuality style guide
MIT License
2 stars 0 forks source link

A new CSS style guide proposal #1

Open davidsingal opened 9 years ago

davidsingal commented 9 years ago

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ http://outlinecss.co.uk/get-started.html

adammulligan commented 9 years ago

Yep, I'm very much in favour of using the BEM syntax in our CSS in the future! I used something similar (but simpler) to implement the WRW prototype.

I find that the "cascading" part of "cascading style sheets" is my least favourite, and makes maintenance a real pain. Having a single class like ".story--header-title" is so much nicer than trying to figure out what is creating the styles for ".story header h1".

There's also something to be said about performance gains for simplified selectors on complex pages, check out this (3 year old) talk from a Github engineer: https://speakerdeck.com/jonrohan/githubs-css-performance. In fact, even if you're not interested in using BEM, check out that talk as it's a real eye-opener on taking care to write good HTML and CSS.

dhakelila commented 9 years ago

I agree, but the danger I see here is that we can create very long names. But I think it is a good convention to be used when needed.

I would keep this to name css modules and would keep states (like .is-hidden) to set temporal states to items that could change on time or after an user action.

adammulligan commented 9 years ago

I'm usually not too worried about long names, most text editors have autocomplete :D

I agree with keeping simplified classes for individual states :+1:

On 9 Jul 2015, at 15:47, dhakelila notifications@github.com wrote:

I agree, but the danger I see here is that we can create very long names. But I think it is a good convention to be used when needed.

I would keep this to name css modules and would keep states (like .is-hidden) to set temporal states to items that could change on time or after an user action.

— Reply to this email directly or view it on GitHub https://github.com/Vizzuality/workflow-style-guide/issues/1#issuecomment-120009198.

andresgnlez commented 9 years ago

Using BEM syntax, we sacrifice the "cascading" feature of CSS, don't we?

I would like to give a try to BEM syntax, but we should be very strict with naming conventions or it will be a chaos!

PD: very interesting talk, @adammulligan thanks for share!