Put all styles in css files vs Mixed structure - css

Question

I am told that the good pattern is to put all styles in css files because blah and blah (you can search the reason in google since it's a very popular idea).
However, I am a person always asking why when people trying to sell. Based on my own experience with some project. I think putting all styles in files are harder to maintain, since there are some inheritable or page specific styles.
For example I have a control to display terms and conditions:
.TermsAndConditions
{
background-clip: padding-box;
border: 1px solid #CFC2A7;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
position:absolute;
top: 0px;
left:0px;
}
When I need to use it on two of my pages I have to create two specific classes for it:
.HomePageTermsAndConditions
{
position: static;
bottom: 20px;
right:30px;
}
.ImagePreviewPageTermsAndConditions
{
position:absolute;
top: 50px;
left:60px;
}
Home page:
<div class="TermsAndConditions HomePageTermsAndConditions">
</div>
Preview page:
<div class="TermsAndConditions ImagePreviewPageTermsAndConditions">
</div>
Absolutely no styles inline, but there are some problems:
Position information is not shared at all, so the performance gain is very limited based on the network speed nowadays. (e.g. clear: left)
Some styles are not even inheritable, so we have to create css classes for each level, which doesn't save effort.
Hard to maintain, since css classes in files may be inherited or overridden by on another page, when editing a class it’s hard to know what effect it may cause, so it takes times to do testing/debug/fixing round trip.
Hurt performance, some css class will remain there when the page using it is removed. It takes effort to clean them.
So what I proposed is to move page/tag specific styles (like position info) inline like this:
.TermsAndConditions
{
background-clip: padding-box;
border: 1px solid #CFC2A7;
border-radius: 5px 5px 5px 5px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.6) inset, 1px 0 rgba(255, 255, 255, 0.3) inset, -1px 0 rgba(255, 255, 255, 0.3) inset;
height: 26px;
line-height: 26px;
padding: 0 10px;
text-align: center;
text-decoration: none;
vertical-align: middle;
white-space: nowrap;
}
<div class="TermsAndConditions" style="position:absolute; bottom: 20px; right:30px;">
</div>
<div class="TermsAndConditions" style="position: static; top: 50px; left:60px;">
</div>
Benifits we can get:
No page specific information in classes. Doesn’t hurt performance since only several styles are in the page
Easier to maintain, since inline style has higher priority, editing an inline style will immediately bring the effect on UI. Also you don’t need to worry about breaking other pages.
When we need to remove a page, we usually don’t need to clean the css. Since page specific css are in the page, it goes with the page. Things in the css files are more likely to be shared.
More object-oriented. Since css classes in files have no page specific information, they are more like a control by itself. It’s easy to plug in to other pages.
For example:
When I need it on a new page, I just copy the html and change the style inline:
<div class="TermsAndConditions" style="position: absolute; top: 50px; left:60px;">
</div>
This is my idea against "putting all styles in css files". I am hoping to see your ideas about it, either good sides or bad sides.
Thanks

Answer 1

I think the best thing is to mix the things...
Usually I use classes, but when i need to specify position/dimensions, i use styles.
Sometimes I use existing classes but mixing it with style, when i need to override class settings.
I think the only case when i will not use style, is when i want to create totally dynamic layout and to have the ability to change it using CSS only.

Answer 2

The benefit of having your styles outside of your HTML is this.
Lets say I have a navbar on every page for example:
<ul class="main-navigation">
<li>my link</li>
<li>my link</li>
<li>my link</li>
<li>my link</li>
</ul>
My styles would then be something like this:
.main-navigation ul li {
color:#000;
}
Now lets say I have the same navbar, but with inline styles this time.
<ul>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
<li style="color: #000;"></li>
</ul>
Or lets say I have my styles embeded into my HTML like so.
<style type="text/css">
.main-navigation ul li {
color:#000;
}
</style>
Depending on how your file management is set up. Most likely you would not want to go through every single HTML file to change something as simple as your navigation color. When you could just go into the style sheet and change one line of code.
Hopefully this make sense. But I guess to summarize I would say in some cases it is probably more practical. However I personally believe that separating HTML, CSS, Javascript, and PHP makes troubleshooting a lot easier.