Comments (7)
@Elfayer this approach has a downside. If you do something like below:
<template>
<div class="table-component">
<h1 class="title">My awesome table</h1>
<row-component></row-component>
</div>
</template>
<style>
.table-component .title {
font-weight: bold;
}
</style>
If the row-component
contains any element with a class named title
, it will be affected by the font-weight: bold
rule, because the style is allowed to leak from it's original component.
As I see it, not using scoped
can lead to either unmaintenable CSS or styles that are much more verboose (to avoid clashing namespaces).
from vuejs-component-style-guide.
But back to the main topic, overall what do you folks think of using /deep/
navigation on Vue.js scoped CSS? π€
Using it you are coupling the style from the children to the parent, but on the other side it reduces some complexity on some cases π€
I feel like if you don't overuse it, /deep/
can be a helpful feature, but it's hard to define what is overusing π
from vuejs-component-style-guide.
I already encountered this issue, I think. Tell me if we are talking about the same thing.
You use scoped
attribute on the <style>
of a child. Then you want to override it on the parent, but you can't. Because Vue is going to generate a random attribute looking like data-v-9922c9c
, and you cannot guess on the parent what it is going to be. So you're stuck. The child style can't be collapsing any other component style (as scoped
is supposed to do) but in the end you can't override its style. Super annoying for reusable components across different project for example.
I personally, from this point, decided not to use scoped
attribute anywhere. So /deep/
is fixing this issue, right?
I believe /deep/
is mandatory in the use of scoped
attribute. But actually I don't know when and why I should use scoped
in the first place. So I'd say /deep/
is an aberration as much as scoped
is. I think using a goo class name at the root of each component and make it as root of your component style is sufficient. Or could you explain to me why I should use scoped
?
Summary:
- I think
scoped
is useless. - So
/deep/
is too. - I personally just use a good root class naming for each of my components and scope the style by it. So, no collision possible. Or is there any other use of
scoped
I'm missing?
from vuejs-component-style-guide.
Hello @adrianoresende
I've never have really used both scoped
nor /deep/
to be honest with you. I know what they can do but, just like @Elfayer , the way I arrange classes and take care of making namespaces with them I never really needed to use those.
Please be free to call friends to post their opinion on this topic. If they really like it, let's write a style guide. :D
from vuejs-component-style-guide.
The only reason I used scope is to avoid side effects.
Everyone has already had side effect with CSS in maintenance or improvement, so CSS enclosed inside component makes it safer.
I'm interested to know the best way to apply style safely and less complexity (less side effect)
from vuejs-component-style-guide.
@adrianoresende You would agree that all the components of an application should have a different name? Well I personally add the name of the component as class root, so no risk of any collision. If there is a collision, you used a class of the name of another component.
Example:
File name: TaskBoard.vue
would look like:
<template>
<div class="task-board">
<!-- ... -->
</div>
</template>
<script></script>
<style>
.task-board {
// ...
}
</style>
Or UsersList.vue
would look like:
<template>
<div class="users-list">
<!-- ... -->
</div>
</template>
<script></script>
<style>
.users-list {
// ...
}
</style>
That's how I work.
from vuejs-component-style-guide.
<style scoped deep>
.child{
}
</style>
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
- 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.