How common are these css declarations?
June 26, 2010 9:39 PM Subscribe
How common is it to include .right {float: right} and .left {float: left} in a css file?
Is that particular declaration something that's fairly standard and should not be questioned?
I know how css works, but I'm not an expert, and I haven't been exposed to a large sample set. One of our developers started adding "right" and "left" classes to some elements, but there were some unintended consequences because of some existing declarations in the css file already (which was written by someone else)... The .right {float: right} and .left {float: left} declarations were already in there.
It made me wonder whether those are common declarations and whether I would be likely to find them in other css files. How often do people use .right and .left that way:
(A) Almost always
(B) Quite often
(C) Sometimes
(D) Not that often
(E) Almost never
Is that particular declaration something that's fairly standard and should not be questioned?
I know how css works, but I'm not an expert, and I haven't been exposed to a large sample set. One of our developers started adding "right" and "left" classes to some elements, but there were some unintended consequences because of some existing declarations in the css file already (which was written by someone else)... The .right {float: right} and .left {float: left} declarations were already in there.
It made me wonder whether those are common declarations and whether I would be likely to find them in other css files. How often do people use .right and .left that way:
(A) Almost always
(B) Quite often
(C) Sometimes
(D) Not that often
(E) Almost never
It is common and this is a bad thing. It violates a fundamental separation of concerns that should exist between HTML, which is structural, and CSS which is presentational.
posted by santry at 10:03 PM on June 26, 2010 [4 favorites]
posted by santry at 10:03 PM on June 26, 2010 [4 favorites]
Is the question whether floats are used often, or whether naming generic classes "right" and "left" as shorthand is common?
To the first, it's very common. To the latter.. well, there's almost always a generic "clear" class to clear the float state. A generic right/left seems a little cavalier to me. In my own code I prefer to give classes descriptive names and define their layout individually. But I can imagine a case where right/left classes would be useful, totally.
posted by cj_ at 10:04 PM on June 26, 2010
To the first, it's very common. To the latter.. well, there's almost always a generic "clear" class to clear the float state. A generic right/left seems a little cavalier to me. In my own code I prefer to give classes descriptive names and define their layout individually. But I can imagine a case where right/left classes would be useful, totally.
posted by cj_ at 10:04 PM on June 26, 2010
This is a bad practice, it's just a shorthand equivalent to inline styles. If you keep doing that, you end up with <div class="colorBlack fontFamilyVerdana fontSize11px">, using the class attribute as a second style attribute.
It's probably pretty common, but it starts to violate separation of concerns between content and presentation, which makes your presentation layer less robust and maintainable.
posted by AlsoMike at 10:13 PM on June 26, 2010
It's probably pretty common, but it starts to violate separation of concerns between content and presentation, which makes your presentation layer less robust and maintainable.
posted by AlsoMike at 10:13 PM on June 26, 2010
Best answer: Here's the problem with .left {float:left;} and .right {float:right;} -- let's say your current website has all the main content on the left, and all the secondary content on the right. All is well.
Then a site redesign requires your main content on the right, and your secondary content on the left. So, you get to do one of these two things:
OPTION ONE: find and replace 'left' with 'TEMPORARY' in all your pages, then find and replace 'right' with 'left' in all your pages, then find and replace 'TEMPORARY' with 'right' in all your pages -- time consuming and possibly error-prone, depending on the size of your site and the coding discipline you have.
OPTION TWO: .left {float:right;} and .right {float:left;}. Yeah, exactly.
You can imagine that, over time with a site of reasonable size, you'll end up with a lot of .left that floats right, .red that is actually .blue, and so on. Plus, your markup will be full of class="red left short black-border", which is no better than style="color:red;float:left;height:2em;border:1px solid #000;". Maintenance nightmare.
The right answer, then, is to actively avoid non-semantic styles like this, or like .red or .top or .narrow. Anything that describes the style being applied is trouble.
Instead, describe the content semantically. So you might have this instead:
.content .main {float:left;}
.content .secondary {float:right;}
And for that other example above, better to repeat styles against those semantics -- it allows easy maintenance, and you don't need to worry that a change in one place will impact something else unintentionally:
.thing-one {color:#f00;float:left;height:2em;border:2px solid #000;}
.thing-two {color:#c00;float:right;height:2.4em;border:1px solid #000;}
...is a lot easier to maintain -- and figure out what's going to change on your site if you change styles -- than:
.red {color:#f00;}
.darker-red {color:#f00;}
.left {float:left;}
.right {float:right;}
.short {height:2em;}
.not-quite-as-short {height:2.4em;}
.border-black {border:1px solid #000;}
.border-black-and-thicker {border:2px solid #000;}
I think I've made my point.
disclaimer: I am a professional web developer with almost fifteen years of experience, I work for a large internet company that you're familiar with, and I wrote one of the CSS best practices documents used by a substantial portion of the company.
posted by davejay at 10:38 PM on June 26, 2010 [9 favorites]
Then a site redesign requires your main content on the right, and your secondary content on the left. So, you get to do one of these two things:
OPTION ONE: find and replace 'left' with 'TEMPORARY' in all your pages, then find and replace 'right' with 'left' in all your pages, then find and replace 'TEMPORARY' with 'right' in all your pages -- time consuming and possibly error-prone, depending on the size of your site and the coding discipline you have.
OPTION TWO: .left {float:right;} and .right {float:left;}. Yeah, exactly.
You can imagine that, over time with a site of reasonable size, you'll end up with a lot of .left that floats right, .red that is actually .blue, and so on. Plus, your markup will be full of class="red left short black-border", which is no better than style="color:red;float:left;height:2em;border:1px solid #000;". Maintenance nightmare.
The right answer, then, is to actively avoid non-semantic styles like this, or like .red or .top or .narrow. Anything that describes the style being applied is trouble.
Instead, describe the content semantically. So you might have this instead:
.content .main {float:left;}
.content .secondary {float:right;}
And for that other example above, better to repeat styles against those semantics -- it allows easy maintenance, and you don't need to worry that a change in one place will impact something else unintentionally:
.thing-one {color:#f00;float:left;height:2em;border:2px solid #000;}
.thing-two {color:#c00;float:right;height:2.4em;border:1px solid #000;}
...is a lot easier to maintain -- and figure out what's going to change on your site if you change styles -- than:
.red {color:#f00;}
.darker-red {color:#f00;}
.left {float:left;}
.right {float:right;}
.short {height:2em;}
.not-quite-as-short {height:2.4em;}
.border-black {border:1px solid #000;}
.border-black-and-thicker {border:2px solid #000;}
I think I've made my point.
disclaimer: I am a professional web developer with almost fifteen years of experience, I work for a large internet company that you're familiar with, and I wrote one of the CSS best practices documents used by a substantial portion of the company.
posted by davejay at 10:38 PM on June 26, 2010 [9 favorites]
Best answer: In short: how often DO people do this? The more experienced they are, the less they do this. Rookie mistake. If I see it in an interview, I reject the applicant. If I see it in production code, I file a bug and get their manager to schedule a code review of the rest of the code they're responsible for.
posted by davejay at 10:41 PM on June 26, 2010 [1 favorite]
posted by davejay at 10:41 PM on June 26, 2010 [1 favorite]
right and left are not in the to 20 class names as surveyed by Google.
posted by artlung at 6:08 AM on June 27, 2010
posted by artlung at 6:08 AM on June 27, 2010
Response by poster: So here's what happened: We run a wpmu installation to power a bunch of sites. Leaving aside whether that in itself is a good idea or bad idea... someone asked one of our developers to change how something looked on one of the themes we use. So the guy adds "right" and "left" classes to those elements in the code that is used on ALL SITES, which means those "right" & "left" classes are now in that place, on ALL THE SITES.
I discover that the layout of these elements on another theme (a theme on which they had previously looked great) has now been completely mis-aligned, because that theme's css files already included those .right and .left classes.
So I'm looking at this and thinking, "this is a horrible idea", and that made me wonder, "how common is this"?
Thanks for all your answers.
posted by eleyna at 7:27 AM on June 27, 2010
I discover that the layout of these elements on another theme (a theme on which they had previously looked great) has now been completely mis-aligned, because that theme's css files already included those .right and .left classes.
So I'm looking at this and thinking, "this is a horrible idea", and that made me wonder, "how common is this"?
Thanks for all your answers.
posted by eleyna at 7:27 AM on June 27, 2010
Response by poster: davejay, your explanation of "rookie mistake" makes perfect sense. Both with respect to why our guy did this (he's a rookie) and why it was already in another theme (the person who created that theme was also a rookie).
I find it depressing on a level I can't really express that we're having this problem, but comforting to know that my gut instinct was correct.
[insert aching lament about people with no pride in their craft here]
posted by eleyna at 7:33 AM on June 27, 2010
I find it depressing on a level I can't really express that we're having this problem, but comforting to know that my gut instinct was correct.
[insert aching lament about people with no pride in their craft here]
posted by eleyna at 7:33 AM on June 27, 2010
So for WordPress the default mechanism for placing images in content is to use an "alignright" and "alignleft" -- and if you leave them out your users will wonder why when they use the editor in WP, why that thing did not align right or left. That code is this:
Now, "rookie" is different from "no pride in their craft" -- a rookie is a person who is still learning, so this sounds like a teachable moment to me. A person with no pride is a more fundamental, and sad issues. Rookies make mistakes, that's what they do. If they learn from them in a constructive way, that's how they get to not be rookies anymore.
posted by artlung at 7:49 AM on June 27, 2010
img.alignright {float: right;margin: 0 0 1em 1em;}
img.alignleft {float: left;margin: 0 1em 1em 0;}
img.aligncenter {display: block;margin-left: auto;margin-right: auto;}
a img.alignright {float: right;margin: 0 0 1em 1em;}
a img.alignleft {float: left;margin: 0 1em 1em 0;}
a img.aligncenter {display: block;margin-left: auto;margin-right: auto;}
Now, "rookie" is different from "no pride in their craft" -- a rookie is a person who is still learning, so this sounds like a teachable moment to me. A person with no pride is a more fundamental, and sad issues. Rookies make mistakes, that's what they do. If they learn from them in a constructive way, that's how they get to not be rookies anymore.
posted by artlung at 7:49 AM on June 27, 2010
Response by poster: artlung, you are right, of course. There's nothing wrong with being a rookie.
The "no pride in their craft" lament is really more for the organization, as an organization. Because we, as an organization, haven't created something where we can build things that don't break. We don't have a teacher who can teach a rookie. We just have a bunch of people, making a lot of changes here and there, without a clear direction or anyone really crafting the system in a way that it won't break later.
(Also, this isn't related to the wordpress img alignment stuff. The elements in question are not native wordpress.)
posted by eleyna at 8:17 AM on June 27, 2010
The "no pride in their craft" lament is really more for the organization, as an organization. Because we, as an organization, haven't created something where we can build things that don't break. We don't have a teacher who can teach a rookie. We just have a bunch of people, making a lot of changes here and there, without a clear direction or anyone really crafting the system in a way that it won't break later.
(Also, this isn't related to the wordpress img alignment stuff. The elements in question are not native wordpress.)
posted by eleyna at 8:17 AM on June 27, 2010
Ah, yes, rereading your question absolutely, it's unrelated to content. Sorry about that.
I have to say, For several years I always would start with an existing theme and try to customize. It was never satisfied with the result. Since learning not to be scared of theming from scratch, I've been much happier. Now, you say you're using WPMU - supposedly the MU functionality has all been folded into WP 3.0, so I wonder if that will have impact on this latest change for you, and how default stylesheets get spit out. I wonder if the stylesheet that your person edited was part of a theme or in the core files, the latter would be a big no-no in my book.
(Side note: I'm a big fan of stackoverflow, and there's a proposal to put up a good WordPress support site: WordPress Answers -- possibly a site like that would be good for questions of this type in future, if the proposal gets accepted.
posted by artlung at 11:29 AM on June 27, 2010
I have to say, For several years I always would start with an existing theme and try to customize. It was never satisfied with the result. Since learning not to be scared of theming from scratch, I've been much happier. Now, you say you're using WPMU - supposedly the MU functionality has all been folded into WP 3.0, so I wonder if that will have impact on this latest change for you, and how default stylesheets get spit out. I wonder if the stylesheet that your person edited was part of a theme or in the core files, the latter would be a big no-no in my book.
(Side note: I'm a big fan of stackoverflow, and there's a proposal to put up a good WordPress support site: WordPress Answers -- possibly a site like that would be good for questions of this type in future, if the proposal gets accepted.
posted by artlung at 11:29 AM on June 27, 2010
Response by poster: The person who made the change with the "right" & "left" went ahead and edited the already-heavily-modified version of the core files that we're using... not sure if they actually edited the stylesheet for the theme they were supposed to be "fixing" or if the .right, .left was already in that theme, and they just decided it would be a great idea to start spitting out those elements with those classes.
We haven't even attempted the 3.0 upgrade yet. I'm a little afraid of what will happen when we do. (Because the modifications we've already made will make it a pain, and I don't have confidence that the people overseeing the project will be able to manage the transition with the attention-to-detail-ness that it will inevitably require.)
I just checked out the WordPress Answers site, and I'll definitely start using it—I hope it takes off. That would be very, very helpful for people who are stuck in a position like this.
posted by eleyna at 2:11 PM on June 27, 2010
We haven't even attempted the 3.0 upgrade yet. I'm a little afraid of what will happen when we do. (Because the modifications we've already made will make it a pain, and I don't have confidence that the people overseeing the project will be able to manage the transition with the attention-to-detail-ness that it will inevitably require.)
I just checked out the WordPress Answers site, and I'll definitely start using it—I hope it takes off. That would be very, very helpful for people who are stuck in a position like this.
posted by eleyna at 2:11 PM on June 27, 2010
This thread is closed to new comments.
posted by rubah at 9:42 PM on June 26, 2010