Comments (11)
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.
from vuejs-component-style-guide.
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.
from vuejs-component-style-guide.
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
from vuejs-component-style-guide.
Hello @ErickPetru !!! Thank you for this issue.
What component organization are you proposing?
- template, style and then script?
- 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
from vuejs-component-style-guide.
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 theprops
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.
from vuejs-component-style-guide.
Hello @ErickPetru :D
Let me add some awesome dudes in this issue: @Elfayer @DannyFeliz @kartsims @aristidesfl
Guys, what do you think about it?
from vuejs-component-style-guide.
@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.
from vuejs-component-style-guide.
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?
from vuejs-component-style-guide.
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.
from vuejs-component-style-guide.
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.
from vuejs-component-style-guide.
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.
from vuejs-component-style-guide.
Related Issues (20)
- "options" should be "props" HOT 1
- Remove use-component-name-as-style-scope HOT 5
- Docute docs translation links are broken HOT 5
- About watch and methods HOT 2
- broken url HOT 2
- 错别字
- [New] When should I create a new component ? HOT 12
- Directory Structure Patterns HOT 7
- Section "Assign this to component" example does no show it HOT 6
- How about a complementing application HOT 3
- Application structure ? HOT 3
- Component naming section is confusing to me HOT 2
- /deep/ selector HOT 7
- Add standalone templates as suggestion HOT 2
- Suggest 'components' be placed before 'props' HOT 2
- 中文翻译中的一个小错误 HOT 2
- Component's name in folder HOT 1
- 'Keep component props primitive' - typos in sample code HOT 3
- #use-script-inside-component is not found HOT 1
- 句子勘误
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from vuejs-component-style-guide.