Day 49: layering entire style sheets

You can use @import to load entire style sheets into a cascade layer.

@import url("path/to/the/styles.css") layer(layername);

For example, you could load something like Bootstrap into a dedicated third-party layer.

@layer third-party, base, components, utility;

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);

@layer base {
  body {
    /* my custom styles */
  }
}
<button type="button" class="btn btn-primary">Primary</button>

An important thing to know when importing styles is that it matters where you put the @import rule. In the spec it says:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.

This is invalid:

@layer third-party, base, components, utility;


@layer base {
  body {
    /* my custom styles */
  }
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović

You can use @import to load entire style sheets into a cascade layer.

@import url("path/to/the/styles.css") layer(layername);

For example, you could load something like Bootstrap into a dedicated third-party layer.

@layer third-party, base, components, utility;

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);

@layer base {
  body {
    /* my custom styles */
  }
}
<button type="button" class="btn btn-primary">Primary</button>

An important thing to know when importing styles is that it matters where you put the @import rule. In the spec it says:

Any @import rules must precede all other valid at-rules and style rules in a style sheet (ignoring @charset and empty @layer definitions) and must not have any other valid at-rules or style rules between it and previous @import rules, or else the @import rule is invalid.

This is invalid:

@layer third-party, base, components, utility;


@layer base {
  body {
    /* my custom styles */
  }
}

@import url("https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css") layer(third-party);


This content originally appeared on Manuel Matuzović - Web development blog and was authored by Manuel Matuzović


Print Share Comment Cite Upload Translate Updates
APA

Manuel Matuzović | Sciencx (2022-12-01T09:38:54+00:00) Day 49: layering entire style sheets. Retrieved from https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/

MLA
" » Day 49: layering entire style sheets." Manuel Matuzović | Sciencx - Thursday December 1, 2022, https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/
HARVARD
Manuel Matuzović | Sciencx Thursday December 1, 2022 » Day 49: layering entire style sheets., viewed ,<https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/>
VANCOUVER
Manuel Matuzović | Sciencx - » Day 49: layering entire style sheets. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/
CHICAGO
" » Day 49: layering entire style sheets." Manuel Matuzović | Sciencx - Accessed . https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/
IEEE
" » Day 49: layering entire style sheets." Manuel Matuzović | Sciencx [Online]. Available: https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/. [Accessed: ]
rf:citation
» Day 49: layering entire style sheets | Manuel Matuzović | Sciencx | https://www.scien.cx/2022/12/01/day-49-layering-entire-style-sheets/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts