{"id":4121,"date":"2024-10-07T11:44:04","date_gmt":"2024-10-07T16:44:04","guid":{"rendered":"https:\/\/frontendmasters.com\/blog\/?p=4121"},"modified":"2024-10-07T11:44:05","modified_gmt":"2024-10-07T16:44:05","slug":"reminder-that-scope-and-html-style-blocks-are-a-potent-combo","status":"publish","type":"post","link":"https:\/\/frontendmasters.com\/blog\/reminder-that-scope-and-html-style-blocks-are-a-potent-combo\/","title":{"rendered":"Reminder that @scope and HTML style blocks are a potent combo"},"content":{"rendered":"\n

There are so many<\/em> different tools for writing scoped CSS with very different takes on how to go about it. Sometimes it’s only a sub-feature of a tool that does other things. But it’s generally thought of as a concept the requires tooling to accomplish.<\/p>\n\n\n\n

Have you ever written a React component that imported scoped styles, perhaps as a CSS module?<\/p>\n\n\n

import<\/span> styles from<\/span> \".\/MyComponent.module.css\"<\/span>;<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Or used a Styled Component to push some styles onto a component you’re already defining?<\/p>\n\n\n
const<\/span> Button = styled.button``<\/span><\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n\n\n
Maybe your Vue components used <style scoped><\/code> blocks within them like you can do with Vue Single File Components out of the box? <\/p>\n\n\n
<template<\/span>><\/span>\n  <button<\/span>><\/span>Submit<\/button<\/span>><\/span>\n<\/template<\/span>><\/span>\n\n<style<\/span> scoped<\/span>><\/span>\n  button {\n    border: 3px solid green;\n  }\n<\/script<\/span>><\/span><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
Despite the seemingly widely-applicable button<\/code> selector above, the styles will actually be tightly scoped to the button you see in the template after processing.<\/p>\n\n\n\n
Or maybe you use Tailwind to apply styling classes directly to elements and like it partially because you don’t have to “name anything”.<\/p>\n\n\n\n
There are a lot<\/em> of solutions like this out there in the land of building websites. I’m pretty convinced myself that scoped CSS is a good idea:<\/strong><\/p>\n\n\n\n
    \n
  • There is little to worry about. Styles won’t leak out and have unintended consequences.<\/li>\n\n\n\n
  • It’s possible to do efficient things like not load the styles for components that don’t appear on a particular page at the time of loading.<\/li>\n\n\n\n
  • When a component retires, so do it’s styles.<\/li>\n\n\n\n
  • Styles are often “co-located” with the component, meaning there is a logical obvious connection between markup and styles.<\/li>\n<\/ul>\n\n\n\n
    I’m here to tell you: you can do all this stuff with just HTML and CSS.<\/strong><\/p>\n\n\n\n
    And I’m not even talking about Web Components or anything particularly controversial or limiting. Vanilla HTML and CSS. <\/p>\n\n\n\n
    What you do is dump a <style><\/code> block in the HTML at the point you want the styles scoped. Just like this:<\/p>\n\n\n
    <main<\/span>><\/span>\n\n   <div<\/span>><\/span>\n     <p<\/span>><\/span>Dum de dum de dum.<p<\/span>><\/span>\n   <\/div<\/span>><\/span>\n\n   <div<\/span>><\/span>\n     <p<\/span>><\/span>Hi ho here we go.<\/p<\/span>><\/span>\n\n     <style<\/span>><\/span>\n      @scope { \/* Scope is the <div<\/span>><\/span> above, as this is a direct child. *\/\n        :scope { \/* This selects the <div<\/span>><\/span> *\/\n          border: 1px solid red;\n          \n          \/* I can use CSS nesting in here, ensuring *everything* is safely scoped *\/\n          p {\n            color: red;\n          }\n        }\n      }\n     <\/span><\/style<\/span>><\/span>\n   <\/div<\/span>><\/span>\n\n<\/main<\/span>><\/span><\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n\n\n
    Here’s an example of using it where one of these three <article><\/code>s has a scoped styles variation:<\/p>\n\n\n\n