Float classes are too generic

[LucaRosaldi]

Hello, I think the float classes defined in _global.scss (.left and .right) are way too generic.

As they are named like that, you must structure your layout using specific names in your markup (e.g. class="content-sidebar content-sidebar-left" instead of class="content-sidebar left"), or to override them with the !important flag, which I consider to be an anti-pattern (and it’s also particularly difficult when working with media queries).

I know many would argue that the naming convention used in the first example should be a standard, but still I’d like at least to have the choice.

Wouldn’t it be more clear if they were named after what they really do (floating elements)? For that, I think .float-left or .fl-l would be much, much better (and more coherent with the other helper classes, named .text-left, .text-right and so on).

[LucaRosaldi]

Yep, I know about the @extend method.

My problem, though, is with the classes that are already declared in _global.scss.

When I have elements with .left and .right classes in my markup, and I want a different behaviour for them, I’m forced to override them with a !important declaration, which is troublesome for coding and not DRY at all.

As I said before, .left and .right are, IMHO, too generic names.

[vinayraghu]

float-left would be a better naming convention. The global file can be updated. Shouldn't be a problem.

[LucaRosaldi]

Hum, pal, just when did you feel the need to get cynic?

I just said that, in my opinion, the name of those classes are too generic, because they just don't correspond to what they really do.

If you think about it, when you give an element a class of .left it means (logically) that you want it to be on the left of the screen, or of some other element, but it does not necessarily mean you want it to float left, does it?

E.g. in a project of mine I have two off-canvas navigation, one on the left and one of the right. So I called them .oc-nav.left and oc-nav.right, which sounds pretty straightforward to me. But doing so I also inherited the floats defined in the classes, which I don't need, and which I have to override.

This is just a small example, but in my experience, when the framework forces you to do something that's against your standards (as to me is overriding an !important rule not defined by myself), it leaves you with a bad taste in your mouth.

Now, I'm not saying Foundation is a bad framework. In fact, I think it's one of the best out there and I use it in 3 out of 4 of my projects. But I do think that sometimes it gets far too specific in defining what should be basic styles.

Take the .nav-bar as an example: it assumes that you put a call to action in it, and overqualifies all the link styles with a :not(.button). Result: you cannot style links with a simple .nav-bar ul li a because it's not enough to override the already-defined rule. If you want to change something, you have to get more specific, and in my opinion that's an anti-pattern. Another example? Box-shadows on buttons. Assuming you want an emboss effects in your buttons is going too far for me.

Anyway, getting back on the original topic, I would't say that defining a different name for a class in _global.scss would "break hundred thousands of web pages already out there". Each of those pages are using a specific version of the framework, so they wouldn't be affected at all.

Hope I explained my point better. Opinions are welcomed.

[LucaRosaldi]

Dear Robertino, I see you're getting personal on this and I didn't start this to put up a flame war.

So, I'll try to answer briefly and politely, and then leave it to your common sense.

First of all, I never proposed to change the behaviour of the .left and .right classes, simply because, due to their generic name, they could imply many different behaviours. I proposed to change their name to .float-left and .float-right, which I think would be a better naming convention.

Now, I don't think this is an insane proposal, because these conventions are used by many other great front-end frameworks, e.g. Bootstrap, which uses .pull-{left-right} or Inuit, which uses (guess what?) .float--{left-right}. By the way, the guy who created Inuit knows quite a bit about OOCSS.

Talking about the naming update (aka the break hundred thousands of web pages problem), it could just be introduced when a new main version ships (Foundation 5). This way, everyone would have a fresh and the world will not end.

Thanks for the suggestion about Foundation @ Google Groups. I'll post the proposal there.

Good day.

P.S I live in a small town, there' no Starbucks here... :((((((

[LucaRosaldi]

Sure man, like you say. Me and my bulls are grateful that a great web guru like yourself wasted his time patiently anwering my considerations on this matter. Sadly, my ignorance didn't allow me to get your point. Nonetheless, your help has been, I dare say, illuminating.

Bless you. Have a good day.

[awshout]

I agree that .left and .right are generic and not entirely semantic, but they aren't ruining my day either.

If you think about it, when you give an element a class of .left it means (logically) that you want it to be on the left of the screen, or of some other element, but it does not necessarily mean you want it to float left, does it?

I think you pretty much summed it up there. You could certainly have something float left on the right side of the page. Then the class doesn't make as much sense.

E.g. in a project of mine I have two off-canvas navigation, one on the left and one of the right. So I called them .oc-nav.left and oc-nav.right, which sounds pretty straightforward to me. But doing so I also inherited the floats defined in the classes, which I don't need, and which I have to override.

I would have simply created different classes for that purpose.

[LucaRosaldi]

I agree that .left and .right are generic and not entirely semantic, but they aren't ruining my day either.

I reckon it's nothing close to a priority, but the more semantic the better, right? :)

I would have simply created different classes for that purpose.

That's just what I ended up doing.

[awshout]

...the more semantic the better, right? :)

Definitely! That was one of the objectives for F4 :thumbsup:

[alokjethanandani]

@LucaRosaldi thanks for bringing this up. I'm Alok Jethanandani, Designer at ZURB. I carefully read your comments and talked to our engineers and designers here in the office. Apologies that the generic naming convention is throwing you off. We'd like to change the class names but it will affect a lot of inherent functionality, which is why we're refraining from changing the naming convention even though float-left and float-right are clearer and more conventional. @RobertinoValue thanks for suggesting the @extend solution. @LucaRosaldi try using this solution, it sounds like a great way to solve your problem. @awshout yes I agree, you do have to give .left and .right some context by appending the object you're associating them to. Thanks for the suggestions guys. I'm gonna go ahead and close this issue for now. We'll consider a name change in future versions of Foundation, but for now try using @RobertinoValue @extend solution.