Placement of styles in a file

[susonthapa]

This is my first time trying out Ignite and I really like it. I was looking at the screen and component files and I'm confused about the placement of the styles within the file.

The Demo Button has the styles defined at the top but the Demo Divider has the styles defined at the bottom. Is there any general rule for putting the styles within the file?

I tried reading through the documentation, issues, and discussions but couldn't find it. Sorry, if it's a stupid question.

[yulolimum]

@susonthapa great question!

There's really no rule for style placements - I think that's more of a personal preference. In Ignite, we elected the default placement to be at the bottom of the file - it doesn't make it better or worse - just a recommended placement. In previous versions of Ignite, we had them above the component class/function.

In my personal experience, I find that having the styles above the component isn't ideal for my personal workflow/efficiency as scrolling from the top of the file to the component definition would differ from file to file depending on the amount of styles declared. With them being at the bottom, you instinctively know where to scroll to to find the component. Again, that's just personal preference.

Now, regarding the Demo Button vs Demo Divider. The Demo Divider is a function component. The styles are referenced in the function body (not called right away) and therefore can be declared after the component. In the DemoButton, since we aren't defining a function, due to the scope of the react elements and their style calls, having the styles at the bottom would result in an error along the lines of "Block-scoped variable '$customButtonTextStyle' used before its declaration.". The "Demo" entry files aren't really something you'd see in a real project - so I wouldn't really use those for inspiration :) Instead, look at the patterns in our components/ folder.

Hope this helps!