Classes

What’s the difference between inline styles vs classes?

In my head, I’ve always known to use classes over inline styles for any project. But are there any effective differences between the two?

10 Answers 10

• If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.

Assuming you’re dealing with static content, then:

• If there’s any way you can reuse the style, make it a class and link to a stylesheet.
• If there’s no way would ever reuse the style (it’s a one-off thing that doesn’t make sense anywhere else) then use a block that references the element’s #id.
• If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of clear: ) then I inline the style into the element.

A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.

However, rather than subscribing to stylistic dogma, my view is you should choose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you’re actually increasing your workload, not decreasing it.

In other words, don’t do something dumb and confusing just because people tell you it’s the right way to do it.

I mainly agree to these points, but if you take it a point further: why not ditch the style block and ids (point #3) — and instead just use inline for these elements? First of all this means you don’t have to add useless id’s to tags that don’t need them anyway, and you decrease your workload by not having to jump around in the document. Besides that I don’t see what it really adds anyway 🙂

I think point #3 may be speculating that it’s possible/probable that you create or run into another spot where the style may be used in the future and can swap out the ID for a class at that time. I’ve had this happen a good bit in the past.

There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It’s all about accessibility and code reuse.

+1 it all comes down to reuse. But sometimes inlining a style which has little or no potential for reuse can help reduce clutter in the library of classes that are actually worth reusing.

Then there’s the speed/size advantages. An external CSS file can define redundant formatting rules, sometimes drastically cutting down the size of your HTML. And an external CSS file can be downloaded once and cached for the duration of the user’s visit.

If the choice was there, my first preference will be classes/other selectors. However, there are situations where inline styles are the only way to go. In other situations, just a CSS class by itself requires too much work, and other types of CSS selectors make more sense there.

Suppose you had to zebra stripe a given list or table. Instead of applying a particular class to each alternate element or row, you could simply use selectors to do the job. That will keep the code simple, but it won’t be using CSS classes. To illustrate the three ways:

Using only class

Using class + structural selectors

Using inline styles

The second way looks the most portable and encapsulated to me. To add or remove stripes from any given container element, simply add or remove the striped class.

However, there are cases where inline styles not only make sense, but are the only way to go. When the set of possible values is huge, it will be stupid to try to make classes in advance for each possible state. For example, a UI that allows the user to dynamically place certain items anywhere on the screen by dragging. The item will have to be positioned absolutely or relatively with actual coordinates such as:

Surely, we could use classes for each possible position the div can take, but that’s not recommended. And one can easily see why:

.pos_20_49 < top: 20px; left: 49px; >.pos_20_50 < top: 20px; left: 50px; >// keep going for a million such classes if the container size is 1000x1000 px 
..
 

Everyone knows that presentation and content should, in an ideal world, be separated. Everyone also knows that this doesn’t work very well a lot of the time. We all know that you’re supposed to use divs rather than tables for layout, but we also know that for any circumstance where you don’t have full control over the content it just doesn’t work properly.

Downloading a 500k style sheet to style one element because you’ve taken every possible style and stuck it in a style sheet will kill your page, downloading 500 smaller style sheets to style your page because you need them all will also kill your page.

Reuse is great in concept, but the reality is that it’s only useful in certain contexts. This applies equally to pretty much anywhere the concept exists. If your project does what you want it to do, does so in every reasonable browser, does so in an efficient way, and does so reliably, then you’re good to go, it’s not dramatically harder to refactor css than is is code.

Источник

How do I define CSS class in an Inline CSS?

I want to create a popup screen appear when i click on an icon in my profile page of a game. The developers have given us access to use HTML codes in our profile area, though using the STYLE tags are blocked. Also I have no access to the head section of the HTML codes, as a result I cannot create any external file to define CSS class and link them to the profile page. Below I have created an example of my codes. In the example code I have created an external CSS code. I want to know how can I get those external CSS into my HTML code (Using Inline CSS method). My problem is defining the CSS class in an Inline CSS method. Things to know before answering my question: 1) Cant create an external file for CSS. 2) Cant write codes inside the HEAD tags. 3) Cant use the STYLE tag. 4) Only HTML codes are allowed. BBCodes are not allowed. My HTML code looks like this:

 
 
 
TITLE
 
PARAGRAPH ONE GOES HERE
 
PARAGRAPH TWO GOES HERE
 
 
 
 

.overlay < position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.5); transition: opacity 200ms; visibility: hidden; opacity: 0; &.light < background: rgba(255,255,255,0.5); >.cancel < position: absolute; width: 100%; height: 100%; cursor: default; >&:target < visibility: visible; opacity: 1; >> .popup < margin: 75px auto; padding: 20px; background: #fff; border: 1px solid #666; width: 300px; box-shadow: 0 0 50px rgba(0,0,0,0.5); position: relative; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; .light & < border-color: #aaa; box-shadow: 0 2px 10px rgba(0,0,0,0.25); >h2 < margin-top: 0; color: #666; font-family: "Trebuchet MS", Tahoma, Arial, sans-serif; >.close < position: absolute; width: 20px; height: 20px; top: 20px; right: 20px; opacity: 0.8; transition: all 200ms; font-size: 24px; font-weight: bold; text-decoration: none; color: #666; &:hover < opacity: 1; >> .content < max-height: 400px; overflow: auto; >p < margin: 0 0 1em; &:last-child < margin: 0; >> > 

Well you’ll have to replace every single class by an inline style attribute. This is clearly horrible. Ask for at least the HEAD

Classes cannot be defined inline. you can’t do what it is you are trying to do. You need more access from the developers.

Источник

Inline CSS Pseudo-classes

I don’t like in-line styles at all, but my current app is based on in-line styles/scripts so, this would be a excellent feature for me. There is one problem: it doesn’t work. Does anyone know why this doesn’t work? Did Chrome not implement it or something?

Demo

if you’re aiming for new Geckos, you might take a look at scoped styles. Not that that’s a real solution, but since you’re dealing with in-line stuff anyway.

There is a difference between «It works in every browser», «It doesn’t work in all browsers», «It doesn’t work in any browsers», and «There is a special browser it may work in». Generally, if it doesn’t work in every (modern) browser it is considered to not work. Your linked document from W3C is from 2003, or what we call the pre-modern browser era.

Specifically when you said ‘All of the answers in that question are incorrect’ when they are not incorrect.

@PW Kad: Thanks for linking. I’ve posted an answer here instead of closing as dupe though since this question centers around the old spec link rather than the concept in general.

1 Answer 1

As a matter of fact, the same document was referenced in another question here. This is what I had to say about it:

That document you link to is a 10-year-old draft.

It’s 11 years old now, but that’s not the point (although it does suggest a very likely reason why the example you give doesn’t work). The point is that the example given does not appear in the latest revision of the same specification. So, supposedly, embedding selectors in style attributes was deemed not viable and dropped as a result.

My answer to the question linked in the comments suggests why such a feature was deemed not viable — it’s simply not compatible with the current state of CSS as a language:

Note that inline styles participate in the same cascade as selectors in rule sets, and take highest precedence in the cascade ( !important notwithstanding). So they take precedence even over pseudo-class states. Allowing pseudo-classes or any other selectors in inline styles would possibly introduce a new cascade level, and with it a new set of complications.

Of course, I don’t claim to speak for the people who actually made the decisions and/or wrote the spec, but if I were one of them, that’s the reason I would have given for not supporting the feature.

That would also explain why no browser has implemented such a feature (or, more likely, the lack of implementation was among the factors causing it to be reconsidered and then ultimately dropped, giving vendors even more of a reason not to start implementing it now that the spec has reached CR status).

The lesson here is to never cite old revisions of W3C technical documents as canon. Always remember to review the latest specification; you should be able to find a link in the header of the document.

Источник

Is it possible to inline a class definition of CSS inside an xhtml file?

Is it possible to inline a class definition of CSS inside an xhtml file? I mean, to put someting like:

5 Answers 5

I think you’re trying to put your CSS in the HTML page, not inline.

You can put CSS in an HTML page (usually in the head ) by surrounding it in style tags:

@Joe: the question was originally tagged JSF, which uses a XML based view technology (Facelets) which requires XHTML templates to generate HTML. The output can be as good perfectly valid HTML5. See also stackoverflow.com/questions/2935759/…

Sure, here’s an example. However, it is best practice to keep your styles in a separate css file.

    img < padding:10px; margin:5px; border:1px solid #d5d5d5; >div.thumb < float:left; >div.caption 
your page code etc..
   

You can also put css inside the p tag.

The nice thing about CSS is it works in any file not just an HTML,XML file. You just need to define the syle block like this anywhere in the page

In HTML and HTML/XHTML, the standard is, you will put this block in the head section. If it is other type of file for example .aspx, or .php, the block still works, even it is not in head block.

the same is true for ASPX file.

You can also define inline CSS which means CSS goes right in the element tag. The syntax is

 My paragraph contain inline CSS
 

Источник