CSS inline or no?

A place to discuss the implementation and style of computer programs.

Moderators: phlip, Moderators General, Prelates

Dr. Willpower
Posts: 197
Joined: Wed May 28, 2008 3:55 pm UTC

CSS inline or no?

Postby Dr. Willpower » Sat Mar 02, 2013 9:31 pm UTC

So, I've been coding for some time and I've just begun to write markup in the last year or so. I tend to write my markup like this.

Code: Select all

<div class="commonprop1 commonprop2" style="propsonlythisdivhas"></div>


But the internet seems to think this is better:

Code: Select all

<div class="uniquenameforthisdiv"></div>

[and in a CSS file somewhere]
div.uniquenameforthisdiv {
allthisdivsprops
}

(I know this is not the best way to write CSS, and the peculiarities of writing it the best way escape me).

Aside from CSS files being cached (and saving bandwidth), what are the advantages to separating the styling from the html in this way? I understand that people want to change the styling of a page without having to change the page itself. However I find that changing things that way is just as, if not more, tedious as keeping the style inline.

What I'm trying to ask is, all tediousness aside, and caching aside, is there a serious benefit to using CSS exclusively?
And if so, can you list some examples?
Image
Hat me, bro

elminster
Posts: 1560
Joined: Mon Feb 26, 2007 1:56 pm UTC
Location: London, UK, Dimensions 1 to 42.
Contact:

Re: CSS inline or no?

Postby elminster » Sun Mar 03, 2013 12:44 am UTC

I wondered this as well.
One reason may be to better manage styles for different media types; either by "@media print" (for example) or selectively choosing the css file. If you wanted different css on IE and other platforms, using inline styles could be a bit bulky.
Also, if you did end up using the style elsewhere (for what ever reason), you already have the class defined.

Inline styles do override external css files though, so I'd imagine that could be something to think about.

I'm not a professional though.
Image

Nyktos
Posts: 138
Joined: Mon Mar 02, 2009 4:02 pm UTC

Re: CSS inline or no?

Postby Nyktos » Sun Mar 03, 2013 1:06 am UTC

Most websites are going to have a number of pages with similar appearances. Keeping the CSS in one file which is <link>'d into all of those pages means if you want to change something everywhere you only have to do it in one place.

Edit: Oh, it looks like you're talking specifically about the case where the styles only apply to one specific element. Well in that case, it mostly just comes down to keeping all the CSS in one place.

User avatar
PM 2Ring
Posts: 3715
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Sydney, Australia

Re: CSS inline or no?

Postby PM 2Ring » Sun Mar 03, 2013 7:08 am UTC

Dr. Willpower wrote:But the internet seems to think this is better:

Code: Select all

<div class="uniquenameforthisdiv"></div>


class should be used when you want multiple items to use that particular style. For one-off variations, use an id. The id style spec can contain all the style info, or it can be used in conjunction with a class style; the id-specified style will over-ride & augment the class style. Eg,

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>CSS tests</title>
<style type="text/css">
    h3 { text-align: center; font-size: large; color: #2200aa; }
    .fancy { font-style: italic; color: red; }
    #special { text-align: center; color: blue; }
</style>
</head>

<body>
<h3>CSS tests</h3>
<p>A normal paragraph</p>
<p class="fancy">A fancy paragraph</p>
<p class="fancy" id="special">A special fancy paragraph</p>

</body>
</html>


Mixing style and content is evil. I admit that inline style strings can be handy during development, but they shouldn't appear in a page that's live on the Net. CSS was invented to keep style and content separate; using inline style strings undermines that goal.

I suspect our CSS guru, Xanthir, will have more to say on this topic...

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Sun Mar 03, 2013 8:02 am UTC

Never go for inline. If you have an element-specific style, do as PM 2Ring said and use an ID. Inline is usually as some sort of last resort method.

You gain a lot from keeping your CSS clean from your HTML.Caching is also a pretty big deal, since CSS is typically easier to cache than HTML.

Remember that you can also make good use of CSS's cascading behavior:

Code: Select all


<article>
<h1>Headline</h1>
<div class="meta">
    Posted on <time datetime="2012-07-01 8:00">July 1st</time>
    by <a href="#" rel="author">Cookie Monster</a>
</div>
<p>Paragraph Content</p>
</article>

/* blog titles */
article h1{}
/* blog content */
article p{}
/* blog author link */
article .meta a[rel="author"]{}

In Minecraft, I use the username Rirez.

Dr. Willpower
Posts: 197
Joined: Wed May 28, 2008 3:55 pm UTC

Re: CSS inline or no?

Postby Dr. Willpower » Sun Mar 03, 2013 8:27 am UTC

PM 2Ring wrote:class should be used when you want multiple items to use that particular style. For one-off variations, use an id.


Yes, I see the value in doing things this way. Part of the inline style markup was to overwrite one of the class stylings. I didn't know id did this as well.

Edit: Also
Steax wrote:Remember that you can also make good use of CSS's cascading behavior:

Wow, I did not know this was possible. I am very thankful that you showed me this behavior.
Image
Hat me, bro

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Sun Mar 03, 2013 9:39 am UTC

Once you're used with giving things semantic elements (like how I used the time element instead of just some span), you'll actually find yourself making fewer and fewer unique classes as it gets easier to make selectors based on where an element is. If CSS's cascading feature is new to you, I really suggest looking at the different ways you can select an element in CSS; you'd be surprised with the handy features you have!
In Minecraft, I use the username Rirez.

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: CSS inline or no?

Postby Xanthir » Mon Mar 04, 2013 12:06 am UTC

PM 2Ring wrote:I suspect our CSS guru, Xanthir, will have more to say on this topic...

I have been summoned! (Actually, I'll respond to any thread with "CSS" in its title or OP or pretty much any post.)

There's no technical benefit to doing it either way. It's purely a maintenance issue. Generally, you shouldn't be putting inline style in your static markup - that's best suited for scripts to do, as that's *way* easier than trying to get a script to create new style rules via the CSSOM and link them up with the element. If you do put it in your HTML markup, that's just one more place you have to look at when you're updating styles.

However, as others have pointed out, your exact problem is probably one of your own making. Make use of selectors, and a lot of them will likely go away. But don't go crazy - using too much "structure" in your selectors is slower and makes it hard to make changes to the HTML. Careful, targetted use of well-named classes on the element or a close ancestor is the best of all worlds. Also, don't forget about the other combinators - separating them with spaces means "descendant", but using ">" like ".foo > .bar" means "child", and is way faster (because it only needs to look at one element, not all the ancestors, when matching things).
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: CSS inline or no?

Postby Xanthir » Mon Mar 04, 2013 12:09 am UTC

Steax wrote:Never go for inline. If you have an element-specific style, do as PM 2Ring said and use an ID. Inline is usually as some sort of last resort method.

After a lot of experience, I agree with the consensus that id selectors should also be avoided unless absolutely necessary. They fuck with the specificity of your selectors too much, and often cause people to resort to the dreaded !important flag just to make things work.

Remember that you can also make good use of CSS's cascading behavior

Nitpick: That's not the cascade. The cascade in "Cascading Style Sheets" is the part where lots of different rules can apply the same property to a single element, and the cascade is the algorithm that decides which one wins. Here's the relevant spec (yet another one I'm an editor of).
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Mon Mar 04, 2013 1:15 am UTC

Actually, that's a good point. IDs should be used as a final option if you need to laser-target a specific element, and shouldn't be the first choice. You never know when you're going to add more of an element, either.

Xanthir wrote:Nitpick: That's not the cascade. The cascade in "Cascading Style Sheets" is the part where lots of different rules can apply the same property to a single element, and the cascade is the algorithm that decides which one wins. Here's the relevant spec (yet another one I'm an editor of).


They... They lied to me! All those articles lied to me!

Thanks for mentioning that. :P

--

Also, I'm curious: is the performance benefit of using the child selector big enough to warrant not supporting IE6 with it?
In Minecraft, I use the username Rirez.

User avatar
phlip
Restorer of Worlds
Posts: 7573
Joined: Sat Sep 23, 2006 3:56 am UTC
Location: Australia
Contact:

Re: CSS inline or no?

Postby phlip » Mon Mar 04, 2013 3:47 am UTC

Steax wrote:Also, I'm curious: is the performance benefit of using the child selector big enough to warrant not supporting IE6 with it?

I'm confused... you're asking whether its benefit outweighs its other benefit? :P

Code: Select all

enum ಠ_ಠ {°□°╰=1, °Д°╰, ಠ益ಠ╰};
void ┻━┻︵​╰(ಠ_ಠ ⚠) {exit((int)⚠);}
[he/him/his]

User avatar
Xanthir
My HERO!!!
Posts: 5426
Joined: Tue Feb 20, 2007 12:49 am UTC
Location: The Googleplex
Contact:

Re: CSS inline or no?

Postby Xanthir » Wed Mar 06, 2013 7:53 am UTC

Steax wrote:Also, I'm curious: is the performance benefit of using the child selector big enough to warrant not supporting IE6 with it?

IE6 is dead, man. Just let it go. (Unless you're targetting China or Korea, in which case I'm very sorry.) Outside of those countries, though, its marketshare is miniscule and still shrinking.

Seriously answering your question, though, the performance benefit of child selectors over descendant selectors has diminished quite a lot in the last few years, due to everyone adopting some smart optimizations for the common cases, but it'll never disappear. But more than that, it's good hygiene - using the descendant selector can accidentally select more than you intended, particularly if you edit your HTML a few months later.

But use whatever makes your code the most readable.
(defun fibs (n &optional (a 1) (b 1)) (take n (unfold '+ a b)))

zewabbit
Posts: 1
Joined: Thu Mar 07, 2013 9:35 pm UTC

Re: CSS inline or no?

Postby zewabbit » Thu Mar 07, 2013 9:42 pm UTC

PM 2Ring wrote:
Dr. Willpower wrote:But the internet seems to think this is better:

Code: Select all

<div class="uniquenameforthisdiv"></div>


class should be used when you want multiple items to use that particular style. For one-off variations, use an id. The id style spec can contain all the style info, or it can be used in conjunction with a class style; the id-specified style will over-ride & augment the class style. Eg,

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>CSS tests</title>
<style type="text/css">
    h3 { text-align: center; font-size: large; color: #2200aa; }
    .fancy { font-style: italic; color: red; }
    #special { text-align: center; color: blue; }
</style>
</head>

<body>
<h3>CSS tests</h3>
<p>A normal paragraph</p>
<p class="fancy">A fancy paragraph</p>
<p class="fancy" id="special">A special fancy paragraph</p>

</body>
</html>


Mixing style and content is evil. I admit that inline style strings can be handy during development, but they shouldn't appear in a page that's live on the Net. CSS was invented to keep style and content separate; using inline style strings undermines that goal.

I suspect our CSS guru, Xanthir, will have more to say on this topic...



Been lurking on here for a while but had to register to say this:

Never, never,never,never use ID's in your CSS file. (Please :()
It's a common misconception that if the item only exists once then you should style it with the #id. (Hell, i'm guilty of this on rush POC's)
You should always use the .class syntax for styling and leave the #id for things such as DOM control - jQuery and such. It will work ok regardless of what you do, but you will make many kittens sad if you choose to use ID's for styling.
There are a few style guides around for CSS that back this up, one step towards creating a decent standard for CSS :)

E.g.

Code: Select all

<!DOCTYPE html>
<html>
<head>
<title>CSS tests</title>
<style type="text/css">
    h3 { text-align: center; font-size: large; color: #2200aa; }
    .fancy { font-style: italic; color: red; }
    .special { text-align: center; color: blue; }
</style>
</head>

<body>
<h3>CSS tests</h3>
<p>A normal paragraph</p>
<p class="fancy">A fancy paragraph</p>
<p class="fancy special">A special fancy paragraph</p>

Dr. Willpower
Posts: 197
Joined: Wed May 28, 2008 3:55 pm UTC

Re: CSS inline or no?

Postby Dr. Willpower » Fri Mar 08, 2013 2:23 am UTC

I'm getting confused as the thread becomes longer. Several people are instructing me not to use ids. I see the value in generalizing wherever possible with classes or selectors. But I can't imagine writing markup without specifying the sizes of divs on the page. The implication I'm getting here is that I shouldn't style my pages at all hahaha. (And my goal is already to style them as minimally as possible).

This is an example from a page I've been twerking for weeks (I can't publish it in its current form in good conscience).

Code: Select all

1         <div id="logo" class="fl"></div>
2         <div id="logotext" class="fl">
3           <a href="index.php"></a>
4         </div>
5         <div class="fl" style="width:200px"></div>
6         <div class="fl" style="width:514px">
Line 5, its just a space filler. Without it I would have to write much more markup though. Is this an appropriate time to consider giving it an id and if not, what would be appropriate?
Image
Hat me, bro

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Fri Mar 08, 2013 3:05 am UTC

As a simple rule of thumb to get around your confusion, just use classes instead of IDs until you find a use that you feel is appropriate. I admit I use IDs sometimes - usually when an element is already being targeted via the DOM (since I do a lot of frontend work) and I want to style them as such. I really should have said "class" and not "ID" up there. CSS is one of those things that come to me while working, and not something I think about in depth outside of my flow.

There's a lot to read on the subject online.

Also, do remember to keep your class names and tags descriptive.
In Minecraft, I use the username Rirez.

Dr. Willpower
Posts: 197
Joined: Wed May 28, 2008 3:55 pm UTC

Re: CSS inline or no?

Postby Dr. Willpower » Fri Mar 08, 2013 3:23 am UTC

Steax wrote:There's a lot to read on the subject online.

Also, do remember to keep your class names and tags descriptive.


Thanks, that helped.
Image
Hat me, bro

User avatar
PM 2Ring
Posts: 3715
Joined: Mon Jan 26, 2009 3:19 pm UTC
Location: Sydney, Australia

Re: CSS inline or no?

Postby PM 2Ring » Fri Mar 08, 2013 5:43 am UTC

From Steax's link:
One of the main and, in my opinion, most valid arguments against using IDs is that they can introduce specificity headaches where you want them least, and it can be a total nightmare fighting your way back out.

Using an ID in a selector instantly adds a specificity wild card (note, not wildcard), and you might not want this effect. It is, in a way, similar to !important; it is a trump card that will override nigh on all other types of selector. You probably don’t always want this.


Ok, that makes sense.

OTOH,
We’ve covered where IDs can trip us up and be but they serve a purpose other than style-hooks; they can be used as fragment identifiers for marking landmarks in the page.

[...]

So, as is the case with most development conundrums, it’s all about context. You know your context better than I, or anyone else does, so don’t let anyone else tell you what to do. If you want to keep an ID for completeness or for fragment identifiers then do, it’s totally your call.


But I will be more cautious in my use of id for CSS in future.

D-503
Posts: 84
Joined: Sun Apr 15, 2012 11:35 pm UTC

Re: CSS inline or no?

Postby D-503 » Fri Mar 08, 2013 5:49 am UTC

If an element is used for styling rather than content, then I think it makes sense to put styles on it with the style attribute. For example, if you have a div that is used to clear a float or add padding below a fixed header bar, creating classes like "clear" or "add-padding" makes it so you have to modify two files instead of one when you change your layout.

EDIT:
Inline styles are also nice when using templates because you can use then to make dynamic styles (e.g. a progress bar that fills up).

pistons9876
Posts: 7
Joined: Fri Mar 08, 2013 6:34 am UTC

Re: CSS inline or no?

Postby pistons9876 » Fri Mar 08, 2013 6:44 am UTC

css styles are preferred when possible because they can be cached in the browser and can lead to snapper websites.

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Fri Mar 08, 2013 12:04 pm UTC

Thing is, you should basically never have an element that's only for styling. Why would you have to change two files? You should be able to change it entirely from CSS.

And yes, inline styles are okay if they're manipulated via javascript, but then it should only be made, accessed and modified by javascript - so you shouldn't need to actually type a style attribute at all.
In Minecraft, I use the username Rirez.

User avatar
hotaru
Posts: 1045
Joined: Fri Apr 13, 2007 6:54 pm UTC

Re: CSS inline or no?

Postby hotaru » Fri Mar 08, 2013 5:45 pm UTC

Dr. Willpower wrote:Line 5, its just a space filler. Without it I would have to write much more markup though. Is this an appropriate time to consider giving it an id and if not, what would be appropriate?

remove that useless div. use "margin" in your css. removing it shouldn't require you to write any more markup.

Code: Select all

factorial product enumFromTo 1
isPrime n 
factorial (1) `mod== 1

Dr. Willpower
Posts: 197
Joined: Wed May 28, 2008 3:55 pm UTC

Re: CSS inline or no?

Postby Dr. Willpower » Fri Mar 08, 2013 6:28 pm UTC

hotaru wrote:remove that useless div. use "margin" in your css. removing it shouldn't require you to write any more markup.


I think this might be the best response yet.

So, this is what I've gathered. In order of good to bad.
0. No markup
1. *{}
2. tag specific rules
3. class rules
4. Ids (Use with discretion)
5. Inline styling
Image
Hat me, bro

User avatar
Steax
SecondTalon's Goon Squad
Posts: 3038
Joined: Sat Jan 12, 2008 12:18 pm UTC

Re: CSS inline or no?

Postby Steax » Fri Mar 08, 2013 11:08 pm UTC

I think I understand the direction you came from, so maybe I should give a quick re-explanation of the concepts behind HTML/CSS.

The idea behind today's "separation of markup and styling" (or what they call 'semantic design') is to use only as much markup as necessary to accurately depict the content you have. As with everything on the internet, there's a sliding scale of how well people agree with this (and how many take the pragmatic approaches), but I'll explain my workflow.

So for step one, take the content you have...

Code: Select all

(Psuedo-content)
- Page header
   - Logo
   - Search box
- Navigation
- Article
   - Title
   - Date of publishing
   - Author
   - Tags
   - Content
- Pagination
- Footer


... and turn it into HTML markup. Completely disregard styling for now, but use classes instead to distinguish different logical parts of your markup.

Code: Select all

<body>
   <header>
      <h1><a href="">Logo Text</a></h1>
      <form action=""><input type="search"><input type="submit"></form>
   </header>
   <nav class="main">
      <ul>
         <li><a href="">Link</a></li>
         <li><a href="">Link</a></li>
         <li><a href="">Link</a></li>
      </ul>
   </nav>
   <article>
      <h1>Article Title</h1>
      <div class="meta">
         <time>July 1st 2012</time>
         <span class="author">Lewis Carniville</span>
         <span class="tags">Cake, Pastries</span>
      </div>
      <p>[...]</p>
      <p>[...]</p>
      <p>[...]</p>
   </article>
   <nav class="pagination">
      <ul>
         <li><a href="">1</a></li>
         <li class="current"><a href="">2</a></li>
         <li><a href="">3</a></li>
         <li><a href="">4</a></li>
         <li><a href="">5</a></li>
      </ul>
   </nav>
   <footer>
      <p class="copyright">&copy; 2013 Barney The Dinosaur</p>
      <p class="misc"><a href="">Terms of Use</a></p>
   </footer>
</body>


Step 2, go into CSS and mold the styling as close as possible to what you desire. Remember that you have all sorts of useful selectors on hand nowadays. Here's where some pragmatic types differ; I tend to use all the new recommended selectors, but if you, say, wish to support old browsers while messing a bit with your markup, you could, for example, use "first" classes instead of using :first-of-type. I will often use "hacks" like :after pseudoclasses to generate extra styling if need be, without touching the markup.

Now, if anything in your design necessitates a markup change, do so - and only use divs and spans unless it's a logical separation. Use classes on these elements to target them via CSS.

The idea isn't to pick between classes, tag specific rules or IDs, but to target your markup appropriately from CSS. Classes and tags are not tools for identifying things for CSS; they're to define and explain the content in your page.
In Minecraft, I use the username Rirez.

User avatar
WanderingLinguist
Posts: 237
Joined: Tue May 22, 2012 5:14 pm UTC
Location: Seoul
Contact:

Re: CSS inline or no?

Postby WanderingLinguist » Sat Mar 09, 2013 1:08 pm UTC

I don't think it's been mentioned yet...

Another reason to keep your styles separate is in case you want to apply different styles in certain cases (such as print) without resorting to scripting.


Return to “Coding”

Who is online

Users browsing this forum: No registered users and 6 guests