![]() ![]() This is why you don’t need a special character when you nest classes, for instance, yet you do need one for HTML elements. The following characters indicate a nested selector to the CSS parser. LimitationsĪs of version 1 of the spec, you cannot have an element selector directly nested inside another selector:įor this particular use case, the CSS Nesting Specification introduced the & selector. ![]() Looking at example 1 and example 2 we can see that nesting lets us write more concise CSS code. Instead of specifying the parent element over and over, nesting lets you remove that part from your code. In some cases, nesting might also give a big reduction in code size. By default, the SASS Linting rule suggests keeping the maximum depth of nesting to 2, which is a good practice to follow. Obviously, with great power comes great responsibility, so don’t overdo it. ![]() Want to go further? You can also nest your CSS code deeper, allowing more style specificity. No more redundantly specifying the parent selector! Using CSS Nesting lets us group the styling and, therefore, implicitly refer to the parent selector. This enables you to write your code more like this: Adding a hover effect to the already-styled element requires you to reselect that given element and add the pseudo-class:īut CSS Nesting lets you repurpose the element selector and nest the hover selector. Usually, you would write CSS rules as separate scoped definitions, based on a given selector. Let’s assume we want to style a button and we also want to style the hover effect of that button. What is CSS Nesting?Īs the name suggests, this feature lets you nest CSS selectors and, therefore, group related styling. Since this feature is relatively new, we want to discuss the capabilities of CSS Nesting and what it lets you do as a developer. The specification was not only motivated by the popularity of this feature in tools like SCSS and LESS, but also because it vastly reduces duplication and heavily improves the readability and maintainability of CSS code.ĬSS Nesting support landed in Chrome Stable in March 2023, and WebStorm introduced support for it with its next major version, 2023.2. Now, CSS Nesting is not only supported by separate tools, it is even an officially recognized feature in the CSS Specification. Indeed, popular CSS-preprocessor tools like SCSS and LESS have supported this feature for quite some time. You might be wondering why CSS Nesting sounds familiar to you, and why you feel like you’ve used it before. Let’s take a look at this new capability and how you can use it in the latest version of WebStorm. Well, not any more! With CSS Nesting, nested styling is now powerful, easy, and native. Some of the styling goes in the panel (the parent), while some goes in the menu item (the child.) As easy as it is to describe this parent-child relationship verbally, it’s surprisingly difficult to describe it in CSS code. Imagine you’re making a navigation menu – a panel with some boxes. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |