Root elements order in component structure

[ErickPetru]

I really appreciate the time put for creating this guide. But I do not agree too much with the order proposed for <template> before <script>.

• The exposed argument about people going to spend more time dealing with HTML seems to be a bit unconfirmmed. Particularly I had spent more time with the component logic (JavaScript) and not with the visual structure (HTML).
• Another point is that keeping <template> and <style> next each other simplifies to think about structure and style together, without having to scroll up and down all the time while writing the styles.

Anyway, I know it's just my personal opinion, but I'd like to see more people contributing with the discussion about advantages and disadvantages of each approach.

[pablohpsilva]

Hello @ErickPetru !!! Thank you for this issue.

What component organization are you proposing?

1. template, style and then script?
2. or script, template and then style?

About having the <template> next to <style> I don't really see that much of a benefit, since the <style> can be completely detached from the component and outsourced in a style file.

Having the <template> first, in my opinion, will give a good impression of what the component will look like. The structure, the elements that compose it, and how its organized. Particularly speaking, having the <template> first is a good impression of what comes next.

Please @ErickPetru , invite people over to discuss about it. Let's build something great for an awesome framework.

Thank you once again for this issue :D

[ErickPetru]

Hello, first let's clarify it: I'm proposing <script>, <template>, <style>. Your arguments makes sense, let's debate it a little more...

• I agree about the possibility of detaching <style> from the component but the style guide itself states that using a naming convention plus scoped styles is the recommended aproach, so we could supose that the <style scoped> is the "right way" and must stay attached to the component file.
• The point about a "first impression" is valid, it may be more clear to discover what will be the UI of a component when jumping between files. However, I think that most components have the need to comunicate with others, so with the <script> tag first we can fastly see all the props exposed, making it easy to understand how to use a component during coding.

Of course I agree with you that we need much more than two opinions about it.

[pablohpsilva]

Hello @ErickPetru :D

Let me add some awesome dudes in this issue: @Elfayer @DannyFeliz @kartsims @aristidesfl

Guys, what do you think about it?

[pablohpsilva]

@ErickPetru I agree with the <style scope>. That's awesome but, I'm not 100% sure if all browsers support it yet. I know Chrome does.

I also agree on seen the API first is a good way to understand what it does. But that's why we recommend creating documentation for component's API.

I still prefer the template, script and style organization. I'm eager to see what others think about it.

[franciscolourenco]

In this case I would trust @yyx990803. The docs use template, script, style. It is either the most intuitive, or Evan already put some thought into it. If you really think this should be different, propose a change on the official docs, otherwise you will create inconsistency.

Also be careful not to overload the guide. Being exhaustive with stuff which doesn't mater, will dilute the good parts, and make the guide harder to read.

The attribute selector used by <style scope> is supported since IE7. Vue 2 supports IE9+ so it is not a problem. However it can have performance penalties when misused.

[Elfayer]

Hey guys ! =)

For <style scoped> I thought you were talking about the Vue-Loader syntax. But it's only available on Firefox apparently : http://caniuse.com/#search=scoped

I don't have a fixed opinion on this. I'd follow what is proposed from Vue-Loader (<template>, <script>, <style>), just because that's how they show it.

Thinking about it, I think I prefer this order anyway. The two opinions here are see the structure first or see the props first. I believe it makes me less scroll down to the props if that's what I'm looking for if the <template> is in the first place, just because between the all three, I believe the longest will always be the <script>.

Maybe the guide is too directive on this though and should only state that people should stick to one structure over the whole project?

[franciscolourenco]

For <style scoped> I thought you were talking about the Vue-Loader syntax. But it's only available on Firefox apparently : http://caniuse.com/#search=scoped

Vue scoped styles don't use that, but this: http://caniuse.com/#search=CSS%202.1%20selectors

[ErickPetru]

For <style scoped> I thought you were talking about the Vue-Loader syntax. But it's only available on Firefox apparently : http://caniuse.com/#search=scoped

Vue scoped styles aren't related to the official CSS scoped spec. Take a look here: https://github.com/vuejs/vue-loader/blob/master/docs/en/features/scoped-css.md

Maybe the guide is too directive on this though and should only state that people should stick to one structure over the whole project?

I believe all of us can agree with it, lol.

[Elfayer]

I believe all of us can agree with it

@ErickPetru That's the idea ;)

Although if that was just me, I agree with @aristidesfl :

The docs use template, script, style.
Also be careful not to overload the guide.

[kartsims]

I agree with you guys, no need to overload the guide, let's stick with the docs as much as possible, they are the source of truth, this guide should be complimentary.

The fact that lots of stuff are removed from the guide is a good thing, the information becomes clearer and easier to grasp. Just look at the Vue.js docs, simple and straight to the point.

[pablohpsilva]

I think I can close this issue then.

Let's stick with the documentation that @yyx990803, which is the same we have on this style guide :D

Thank you for your help on this issue guys.