SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Is inline CSS SOOOOO bad?

    Hello!

    To create a cohesive site one would expect the styling to be uniform throughout. As we all know, external style sheets can greatly facilitate this since every item with the same class can quickly be changed; in addition, since external style sheets are cached, the pages will load quicker. We're also told that inline styles aren't so good to use.

    However, doesn't every single forum use inline styles (including this one)?

    For example, on this page, I'm using this font, then this comic fontand then
    centering my text.
    : all defined in-line.

    With this in mind, would it be "sooooo bad" to have a website that has a "healthy" combination of external style sheets and some inline styles on each page?

    I appreciate your thoughts...

    -Eric

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,175
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Inline styles are just really inefficient. If you have to write the same one twice, you've kind of missed the point of CSS. You might as well just be using presentational HTML (from the 1990s). If you only use a style once, then fair enough. But using the same inline style more than once means that, if you want to change the style, you'll have to change it in many places.

  3. #3
    SitePoint Wizard bronze trophy chris.upjohn's Avatar
    Join Date
    Apr 2010
    Location
    Melbourne, AU
    Posts
    2,191
    Mentioned
    17 Post(s)
    Tagged
    1 Thread(s)
    I completely agree with ralph, while this forum and others like it are using inline styles for certain things it's not a huge impact compared to if you put inline styles on 100 elements that all did the same thing. Personally the way i do things these days is with dedicated CSS selectors in my stylesheet, if I have any custom modifications i need to make to specific elements I use JavaScript to either change the style inline if there is no one pattern i can use again again or i simply just add another class to the element.

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    2 posts and 2 answers

    Ralph,

    Thank you for your response to this post and to the other one that I just made regarding fields/buttons and WYSIWIG editors.

    After a quick look at the CKEditor, I see that it supports both fields and styles so that I can define them the efficient way.

    Enjoy your week,

    Eric

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thank you for your input! My plan was to have my basic set of styles with a little wiggle room at the individual level (similar to how a basic forum such as this one is set up). Might you elaborate on a specific example of using javascript to change the style inline? (I fear that I don't see the advantage of writing the javascript versus just having an inline style)

    -Eric

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    You may occasionally need to use inline styles if you have content say that comes from a database and you need to size the element depending on the amount of content that you need to show. The easiest way would be to calculate the width serverside and then insert an inline style with serverside code to set the appropriate dimensions.

    On one site I did there was a progress bar that was styled with css and to update the width of the progress bar the width from 1% - 100% was written directly into the tag using an inline style <div style="width:50%">Progress bar</div>. The width was only known at runtime when the progress data was received from the database. The inline style was thus easier than setting up 100 classes for every width from 1% to 100%.

    However, barring those types of scenarios there is little need to use inline styles. (The ones you see in the forum code are probably because of dynamic changes and inserted when run and not by default or because of functions similar to the ones that I described above.)

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,798
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Nothing is absolute... but ralph's point about inefficiency is is key reason. Paul's example echoes that, in reverse.. there are rare cases when inline is more efficient than 100 classes. In addition, there are specificity issues it might cause if you were to mix box techniques will-nilly. There is also the idea of ease of maintenance, its easier to make a stylistic change w/o having to sift through all your markup.

  8. #8
    SitePoint Evangelist
    Join Date
    Mar 2011
    Location
    Bellingham, WA
    Posts
    450
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks all for your comments, they've been very helpful...

    -Eric

  9. #9
    SitePoint Member
    Join Date
    Aug 2011
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's not bad. But jQuery or normalized CSS styling is preferred over inline styles. However, it's good to avoid inline styling as much as possible.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •