Styleguide: Template / Options consistancy

[MachinisteWeb]

Hi @chrisvfritz.

In the Styleguide, the rules about options order said the correct order in a normal case is:

module.exports = {
    ...,
    data: function () {
        return {}
    },
    ...,
    template: `<div>
        <div></div>
    </div>`
}

but, the rules about top-level element order in SFC said:

Single-file components should always order template, script, and style tags consistently, with <style> last.

So the way this sentence is written suggest that order:

<template>
    <div>
        <div></div>
    </div>
</template>

<script>
module.exports = {
    data: function () {
        return {}
    }
}
</script>

This is exactly the inverse of previous rules.

So I suggest changing this sentence by:

Single-file components should always order script, template, and style tags consistently, with <style> last.

and change good example order place:

<!-- ComponentA.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<script>/* ... */</script>
<template>...</template>
<style>/* ... */</style>

example before:

<!-- ComponentA.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

<!-- ComponentB.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

That not said the others order is not possible, but that bring consistency in rules

What is your thought? (Yeah I know is not a horrible problem, but if it's just little better, why not?)

[MachinisteWeb]

I just read this from an user do not follow this rules because he need keep template / style close.

I go template -> style -> script
Because I often go back and forth between layout and styling

The interesting thing is because the prefered way is

<template></template>
<script></script>
<style></style>

the user must jump over <script> part most of time because of link between template and style.

This disapear in this model

<script></script>
<template></template>
<style></style>

1. Constistency between options order rules and sfc top-level element order
2. Style can be removed without change the tag order
3. Link between « script / template » and « template / style » is more logic.

[chrisvfritz]

Hm, I can see the logic here. You've convinced me. 😄 If you submit a PR to the Style Guide removing the part that recommends a specific order, it will be accepted.