class="hint-top" instead of class="hint--top" ? #12

Closed
partikule opened this Issue Feb 15, 2013 · 11 comments

Projects

None yet

6 participants

@partikule

This is one improvment sugestion.
Why not write "hint-top" instead of "hint--top" ?

Is there a technical reason ?

@partikule

As I read it on : http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/ :

"A common argument against BEM is that it’s ugly" : I can only agree... :-)

What do you think about : #11

In a way, "hint-top" (without the BEM convention) could be enough.

So the declaration will become : class="hint-top" : In this case, the coder will know what "hint-top" is.
I think BEM is great if you can have collisions in your CSS and also if you have multiple childs, which is not the case with hint.

@chinchang
Owner

hint class is definitely worth dropping as in #11. Will check its compatibility soon.

@partikule

yes, and if your test are positive, this can make the class name definitely more elegant ! :-)
On my side, I've tested it on :

  • Firefox Mac 18.0.2 : OK
  • Chrome Mac 24.0.1312.57 : Must click on DOM element to make the hint display.
  • Safari Mac 6.0.2 : OK
@xPaw
xPaw commented Feb 15, 2013

I do agree that hint-top looks much nicer.

@joshamos

Looks aside, the benefits of this approach become quickly apparent when you
get used to it.

On 16 February 2013 01:28, Pavel notifications@github.com wrote:

I do agree that hint-top looks much nicer.


Reply to this email directly or view it on GitHubhttps://github.com/chinchang/hint.css/issues/12#issuecomment-13608738.

Josh Amos | UX Designer
99designs | Melbourne | (03) 9090 8299
**

@partikule

@joshamos : the BEM naming convention is not needed in the case of "hint".
Read carefully the BEM naming convention and you will see that it is powerful and it becomes good for complex objects. Here, we speak about the "hint" class, which has one level child tree.

@partikule

Btw, the class can also, depending on the project, be completely integrated.

For example, lets say you want to add tooltips on ALL label which have the "title" attribute defined and display the title if the label has one :

Replace

[class*="hint-"]

by :

label[title]

Play with :

label[title]:after {
content: attr(title);
....
}

... and adapt the other selectors CSS to get the wished result.

Great job Chinchang !

@cmwelsh
cmwelsh commented Mar 8, 2013

Perhaps you could refactor the hint.css classes as SCSS mixins. One doesn't always have the ability to pick class or attribute names, or perhaps they already wrote their tooltips using another syntax and don't feel like changing the markup.

As a bonus, I can apply static content tooltips to items using nothing but pure CSS (no data attributes in my markup are required if I pass the contents to my mixin).

@katgironpe
Contributor

@partikule +1. I agree it is very ugly. If not, insensible. I also found a need to call it s-hint-top for some reason. We can add a variable to make sure anyone who doesn't like to use BEM naming convention. Trying something right now to fix that issue.

@katgironpe katgironpe added a commit to katgironpe/hint.css that referenced this issue Nov 21, 2013
@katgironpe katgironpe Allow changing 'hint--' to something else.
fixes chinchang/hint.css/#12
ad3ab29
@katgironpe katgironpe added a commit to katgironpe/hint.css that referenced this issue Nov 22, 2013
@katgironpe katgironpe Allow changing 'hint--' to something else.
fixes chinchang/hint.css/#12
4d1efa8
@katgironpe katgironpe added a commit to katgironpe/hint.css that referenced this issue Nov 22, 2013
@katgironpe katgironpe Allow changing 'hint--' to something else.
fixes chinchang/hint.css/#12
e9ab321
@katgironpe katgironpe added a commit to katgironpe/hint.css that referenced this issue Nov 22, 2013
@katgironpe katgironpe Allow changing 'hint--' prefix to something else.
fixes chinchang/hint.css/#12
d3be84c
@chinchang
Owner

Option to change the class name prefix has landed in v1.3.1.

@chinchang chinchang closed this Nov 23, 2013
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment