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


#1

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,

-Jose


1 SideMenu, Multiple Ion View Headers
#2

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>
</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.


#3

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?

Regards,


#4

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.


#5

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)

-Jose


#6

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.