OK, so I know semantically, design and content are supposed to be separated. But does it matter? Do I really need to create a new class every time I want to move something by a few pixels?
(I definitely have some BAD inline styling that I need to get rid of, but I'm talking about moving a <p> tag or something)
You can't scale it efficiently. Eventually your code becomes unmaintainable.
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
<span style="color: green;">Foobar</span>
...
Now what if another designer decides to change the shade of green?
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
<span class="color-green">Foobar</span>
...
.color-green {
color: green;
}
This also means the developers don't have to worry about styling and such. If they want something green, add the green class to it. If the designers change the shade of green in the stylesheet the developers don't need to do anything at all. For your own personal sites it doesn't really matter that much but when you're working on a project with hundreds of developers you need to make things scale.
(2013-01-14, 12:37 AM)Nathan Malcolm Wrote: [ -> ]You can't scale it efficiently. Eventually your code becomes unmaintainable.
Your color-green idea is still flawed. If you do a total makeover and change the colour, your classes will quickly become confusing. You should just wrap your blog posts in a "post" div or something and go from there. e.g.: .post p { color: #333; }
That's not even close to what I'm talking about, Nathan.
For example, to make some elements line up, I had to give a span a relative position of -9px. Should I create a class just for this style that will be used only once? And create dozens of classes for one-time, barely styled elements, and end up with a huge global.css?
(I'm not trying to argue, it's just that "semantics!!" is not a compelling argument for me.)
I think it depends on whether you want to make the theme responsive at some point. Then inline styles are a total pain.
I, personally, don't see anything wrong with a bit of inline styling specific to one element. In the event that you end up needing to reuse that style, then you can move it into a stylesheet.
Although, once you're finished fiddling with the style, you could always throw it into global.css with a page-specific class name (ie. .page-index_someblock). At the end of the day, the browser doesn't really care where the style actually is (unless you start dealing with overlapping styling), so everything beyond that is pretty insignificant.
You also have the "benefit" of designing for your own site - if you have any "bad" practices, so long as they don't cause bugs, it doesn't really matter. If someone's going to take the time to tear your design apart over sementics (lol semen) semantics, who cares?
EDIT: I think it should also be noted that these practices are typically frowned upon in cases where authors are REPEATING the same styling over and over. I don't know that anyone has a good reason against one-off inline styles, which is what you're dealing with, Brad.
I use inline styling very rarely at work. Even if I know I am only going to use that certain attribute on the one element, I will likely make a class for it and use that.
Often the names I use let me know what a certain element is exactly rather than having to work out what a p, div, span, etc. tag is even there for in the first place.
I work on a new site once every week approximately, so going back to something I did even 2 weeks ago gets a bit confusing for me. ._.
(2013-01-14, 01:30 AM)brad-t Wrote: [ -> ]That's not even close to what I'm talking about, Nathan.
For example, to make some elements line up, I had to give a span a relative position of -9px. Should I create a class just for this style that will be used only once? And create dozens of classes for one-time, barely styled elements, and end up with a huge global.css?
(I'm not trying to argue, it's just that "semantics!!" is not a compelling argument for me.)
Assuming it's some sort of sidebar block, you'd call the class
sidebar-block and put the 9px in there. That way, you can use it on other sidebar'd pages.
(2013-01-14, 01:13 AM)CAwesome Wrote: [ -> ] (2013-01-14, 12:37 AM)Nathan Malcolm Wrote: [ -> ]You can't scale it efficiently. Eventually your code becomes unmaintainable.
Your color-green idea is still flawed. If you do a total makeover and change the colour, your classes will quickly become confusing. You should just wrap your blog posts in a "post" div or something and go from there. e.g.: .post p { color: #333; }
My example was simply to provide an overview of reusable CSS which can easily be maintained. I'm not sure what you mean by "your classes will quickly become confusing"; green is green. You can change it to any shade you like and it will take affect across the site. Take the mobile Facebook site for example. This theory can be applied to sizes, colors, weights, etc...