Fluid Styled Content
Choose how much of Fluid Styled Content's presentation the site will keep. Both choices use the installation in Installation and the same Vite bundle. The difference is which templates and CSS the site loads.
Keep existing FSC styles
For an existing site, keep typo3/ and
typo3/ in the active Site Set. Override only the
templates or partials whose markup should use StyleX. Set the sitepackage's
template fallback paths in its Site Set settings, for example:
styles.templates.layoutRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Layouts
styles.templates.partialRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Partials
styles.templates.templateRootPath: EXT:my_sitepackage/Resources/Private/ContentElements/Templates
Copy the selected FSC template into the matching sitepackage directory, then
apply stylex: keys to its elements. Existing elements continue to
use FSC's templates and CSS. Check the browser's computed styles where FSC
selectors and atomic classes set the same property.
Own the presentation in the sitepackage
If the site supplies styles for its standard elements, omit
typo3/ from the active Site Set while retaining
typo3/ where its content rendering is used. Author
the site's templates and Content Blocks, and import their StyleX files from
the Vite entrypoint. See Content Blocks for glob discovery.
Rich-text output still contains elements such as paragraphs and links that have no StyleX class on each element. Include a scoped base stylesheet in the Vite entrypoint for that output:
import '../CSS/rte.css';
.ce-bodytext p { margin-block-end: 1rem; }
.ce-bodytext a { text-decoration: underline; }
With either choice, keep use while FSC or other CSS is
unlayered. The cascade guidance in Bootstrap and cascade layers
explains why a layer-order declaration alone does not layer existing CSS.