Support for CSS Guidelines

[HellPat]

Would you accept a Pull-Request for a config switch to support http://cssguidelin.es/ ?

$csstyle-support-guidelines: true;
@import 'csstyle';

Then the options can be used like

<div class="component component--option">

instead of

<div class="component --option">

[geddski]

Yeah I know a couple people that would like this. Though I'd probably use a different config name since css guidelines includes a lot of other things than this. 

— Sent from Mailbox

On Thu, Mar 12, 2015 at 5:54 AM, Patrick [email protected] wrote:

Would you accept a Pull-Request for a config switch to support http://cssguidelin.es/ ?

$csstyle-support-guidelines: true;
@import 'csstyle';

Then the options can be used like

<div class="component component--option">

instead of

<div class="component --option">

---

Reply to this email directly or view it on GitHub: https://github.com/geddski/csstyle/issues/33

[HellPat]

Do you have any idea about a better config name? csstyle-long-options ?

[benseitz]

:+1: I would love that.

[HellPat]

Ping @geddski :-) I'm preparing a PR for that. If you have a better suggestiion for the config-switch let me know.

[geddski]

Could go with $csstyle-verbose-options or $csstyle-long-options

— Sent from Mailbox

On Sun, Mar 22, 2015 at 6:43 AM, Patrick [email protected] wrote:

Ping @geddski :-)

I'm preparing a PR for that. If you have a better suggestiion for the config-switch let me know.

Reply to this email directly or view it on GitHub: https://github.com/geddski/csstyle/issues/33#issuecomment-84600479

[teddybradford]

Any news on this front? Would love to use an option like this.

[HellPat]

Sorry for the delay. i must have missed your answer regarding the variable namings. Here the link to http://cssguidelin.es/#starting-context for reading / documentation.

Please read the message. Postcss is missing in the tests at the moment because i don't know how it's working. Maybe you have a hint for me.

[HellPat]

I in general think that the .component--option is a bit better for the following reason

<div class="person --male"></div>
<div class="monkey --male"></div

--male is not unique so one style affects each other. And the specitifity is a little lower with the guildline.es way.

[teddybradford]

Agreed. The .component--option naming convention also keeps components more isolated, which is especially helpful when debugging.

[geddski]

As long as you're using csstyle to create your selectors the options will never collide because it includes both the component and the option name in the selector.

[geddski]

The main win of this PR is to make grepping for selectors in your html slightly easier.

[teddybradford]

True, but I can also see a use case for wanting to use csstyle with an already existing codebase that has an established library of components. Depending on the scale and complexity of the project, refactoring all components to use csstyle may not be practical. With that said, you're probably right that easier grepping is the main allure for this.

[geddski]

Good point. This makes csstyle that much easier to configure to an existing convention like many big projects would already have. +1

@psren Are you ready for me to review and merge?

[HellPat]

Yes. Would be nice if you could look at the missing postcss test.

[geddski]

Will do

[HellPat]

Is there any news here?

[HellPat]

Ping

[HellPat]

Pong

[simonj]

ding dong