Beginner Question: When is it appropriate to use a JS component instead of a CSS element?

Hello there,

I’m a brand new user of Ionic, and I like the analogy that compares it to Twitter bootstrap, however, after having read the docs these past days, I’m a bit confused about the usage between CSS or JavaScript components. For example, take List and Lists. How do I know when should I use one or the other?

If I were to opt for a JavaScript component, can I still change its appearance via custom CSS?

Thank you in advance for your answers,


My personal mode of operation is to default to using just the css, and only using the javascript/directives when I need some aspect of their functionality. For example, if I just want to display a list of items, I will use

<div class="list">
  <div class="item"></div>

But if I’m going to need the extra list functionality, like option buttons, etc, I will use the full directives. I’ve never done any benchmarking, but my reasoning is simply that using fewer directives will preserve performance.

1 Like

Thank you for your reply sir,

Quick question, If I choose to use the CSS components exclusively, does that mean that I have to code my own animations for them?

Also, and sorry to repeat this question, tell me if this is somehow accurate… The more I use JavaScript directives, the less it’s possible to customize the look and feel via CSS, is this statement correct?


You can change the look and feel via css without breaking the directives by modifying the _variables.sccs file and recompiling the main ionic css. Using this approach, you can continue to mix css-only and directives as much as you like.

Thank you once more,

Do the JS directives exist basically to provide “out of the box” animations and behavior that is similar to iOS UI-components? (sorry for the sequence of questions, I’m really a noob eager to learn Ionic very well)


The directives exist to provide easily used ui components for hybrid mobile apps. The css classes exist to style those components, but can also be used on their own.