Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Asia Chan
Asia Chan
11,007 Points

When do we use CSS or jQuery to add dynamic content? Do they have same results? If not, what're the major difference?

I had finished jQuery basics prior this and it taught a similar execution wherein you can add "dynamic content" also

Questions:

  • When do we know when we'll use CSS or jQuery when adding "dynamic content" (in jQuery) or "generated content" (in CSS)
  • What is the major difference between "dynamic content" (in jQuery) and "generated content" (in CSS)
  • Can they execute the same results?

Additional question:

  • Which execution provides a smaller size? (I'm asking this bec I plan to work on html ads where small sizes are paramount.)

Thanks in advance!

1 Answer

miikis
miikis
44,957 Points
miikis
miikis
44,957 Points

Hi Asia,

You can't really add dynamic HTML content with CSS. There's a couple hacks you can try with pseudo-selectors like :before and :after but they're very limited in capability. JavaScript, on the other hand, — which is all jQuery is — excels at generating and manipulating content, dynamically. That being said, if you care at all about search-engine rankings and accessibility, you should attempt to design your site to be usable sans JavaScript. In any case, adding dynamic HTML content is not the primary use-case for CSS and should be avoided whenever possible.

Cascading Style Sheets (CSS) are meant to be used to style the look and feel of your HTML content. This is what CSS excels at. Though there are some cases where you might need to manipulate the styling of your HTML with JavaScript, these cases are the exception to the rule. For example, the CSS3 animation you want might not be supported in the browsers you need to support, in which case handling that functionality with JavaScript is completely acceptable. Sometimes you can compromise and use both JavaScript and CSS to style your content, while employing each at their individual strengths. Often this manifests itself in the form of toggling CSS class-names, to and from HTML content, by way of JavaScript.

In short, choose CSS over JavaScript whenever possible. Feel free to ask for clarification, if you need it ;)