Can nested css selectors be used with Vue.js css modules?
For example, I am trying to scope this css (to avoid affecting child components):
.list {
...
.item {
...
}
}
The documentation only provides examples without nesting, but is it still practical to use nested selectors? If I have to name them like .list-item then it's similar to BEM naming conventions. But if I follow BEM, is there a point in using css modules?
A great way to work with nested css selectors without affecting child components is by utilizing css modules.
To enable nesting, you can use a preprocessor such as LESS or SASS.
If you are working with Single File Components, your component structure might look something like this:
<template>
<ul :class="$style.list">
<li :class="$style.item"></li>
</ul>
</template>
<!-- Or lang="less" -->
<style module lang="scss">
.list {
...
.item {
...
}
}
</style>
Indeed, nesting CSS selectors can be achieved through the use of SCSS. Setting up SCSS is necessary for this.
For example, you can include your style tag within a Vue component like so:
<style scoped lang="scss">
The 'scoped' attribute ensures that the styles only apply to that specific component.
When it comes to BEM methodology, SCSS allows you to structure your code in a way such as:
.list {
//styles-a
&-item {
//styles-b
}
}
This will translate to the following CSS:
.list {
//styles-a
}
.list-item {
//styles-b
}
To customize a CSS class from a UI library in Vue, like the n-dropdown component from Naive UI, and specifically modify the deeply nested
n-dropdown-option-body__prefix--show-icon:global keyword. Here's how you can achieve this:
<template>
<n-dropdown :class="$style.menu">
</n-dropdown>
</template>
<style module>
.menu:global.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
margin-left: 33px;
margin-right: 19px;
}
</style>
This will result in a selector that looks like:
.MobileNavMenu_menu_NhSka.n-dropdown-menu .n-dropdown-option .n-dropdown-option-body .n-dropdown-option-body__prefix.n-dropdown-option-body__prefix--show-icon {
margin-left: 33px;
margin-right: 19px;
}
Any classes specified after the :global keyword will remain unaffected by module manipulations.
If the .n-dropdown-menu should be a child of the menu, ensure to add whitespace around the :global declaration:
.menu :global .n-dropdown-menu
Failure to do so may lead to unexpected crashes in Vue.
I'm trying to make my button take up the full width on smaller screens like mobile devices. Here's what I have so far... Large Device https://i.sstatic.net/TJex1.png Medium Device https://i.sstatic.net/Hvkan.png Small Device https://i.sstatic ...
My web app is designed to display blog posts in a grid layout. However, the BlogCards component in the Home.vue file is not showing any content as expected. The data is stored in firebase, and when I navigate to /blogs, I can see the blogs displayed in a g ...
One of the key features of Chrome on Android is that the address bar disappears when scrolling, allowing for more screen space. However, when you click on a text input field and the keyboard pops up, the address bar reappears. It seems like Google intenti ...
I am currently in the process of developing some code that utilizes Element.getBoundingClientRect (gBCR), combined with inline style updates, to carry out calculations. This particular project is not intended for a general website, so I am not interested i ...
I am currently managing a SMF forum and I am facing an issue while trying to apply a background image exclusively to the homepage. Whenever I add a style to the .body class, it changes the background of not just the homepage but also other sections like ...
I've been trying to center a link using different methods like text-align:center and display:inline-block, but it seems to be slightly off-center. I've attached images along with my code below for reference. Any assistance would be greatly apprec ...
Having trouble implementing a context menu in my SyncFusion TreeGrid. Despite following the instructions, nothing seems to be working for me. Here's a snippet of my code: <template> <ej2-treegrid :dataSource="tabla" :context ...
I am facing a challenge with an empty array that I have: items: [ { item:null, category_id: null, } ] Can anyone help me figure out how to populate this empty array with the data? Here is an example of the data I have: ...
I'm working on implementing a Vuetifyjs Autocomplete feature. My goal is to have the menu open when the user focuses on it using the tab key after entering information in a previous input field. Below is a snippet of the code I am using: <div id=" ...
The attempt to center the buttons in the viewport using text-align:center for nav, ul, and li has proved ineffective. The alternative of nav {text-align: left;} was no more successful. CSS Snippets: #container { width: 100%; background-color: bla ...
I am endeavoring to incorporate an icon into all unvisited links on a specific Wordpress category page. Below is the CSS code that I am utilizing. It has been placed at the conclusion of my final CSS file. .category-xyzzy .entry-title a:link { background ...
I have an array of strings that I want to transform by turning certain words like "User object", "Promise", etc into clickable links. Here is the initial array: var strings = ['This returns a promise containing a User Object that has the id', &a ...
I am trying to align the entered date to the left in input[type='date']. However, when testing on mobile browsers like safari and chrome, the date remains centered within the input. mobile example This is the code I have been working on: .co ...
I currently have 2 mirror sections within my DOM, one for delivery and another for pickup. Both of these sections contain identical content structures. Here's an example: <div class="main-section"> <div class="description-content"> ...
I need help with two text inputs that are connected v-model to a ref object. I also have two other refs, minimum (100) and maximum(1000). My goal is to allow users to input values within the range of the minimum and maximum values provided. If the value en ...
In this HTML example, there are two animated pictures - one background and the other an object. Despite using scale and rotate animations, the performance is choppy on full HD monitors, especially in Firefox where it runs at about 20 fps. Initially, jQuer ...
Currently I am a student studying the fundamentals of HTML and CSS. My latest project involved creating a website showcasing my work from digital arts class, complete with a simple CSS slideshow. The original intention was to have each image displayed on i ...
One interesting feature on my website is that the header disappears as users scroll down the page, but reappears when they start scrolling back up, even if they are halfway down. However, if a user quickly scrolls up and down, there seems to be an issue wi ...
I've recently started using masonry for the first time and you can check it out here: Although I have managed to set it up, I am facing some issues with its positioning of boxes when dragging items in. For example, instead of placing a medium-sized ...
Currently, I am experimenting with CSS3 and creating bubble shapes. However, I have encountered an issue. I am trying to create a triangle with a 1px border, but the result is a thicker triangle than desired. You can view my code on this fiddle : FIDDLE ...