Skip to main navigation Skip to main content Skip to page footer
itb3

Separation of Concerns

Wenn wir Komponenten nach dem BEM Paradigma entwickeln, benötigen wir einen Abschnitt für HTML einen für CSS.

Im TYPO3 Umfeld sieht das in der Regel so aus:

HTML 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/>
<f:section name="Main">
  <div class="mstitb_text">
    <f:format.html>{data.bodytext}</f:format.html>
  </div>
</f:section>
</html>

SCSS 

  .mstitb_text {
    background-color: red;
  }

Aber eigentlich möchten wir unser HTML und unser SCSS an einem Ort haben.

Ungefähr so:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"/>
<f:section name="Main">
  <div class="mstitb_text">
    <f:format.html>{data.bodytext}</f:format.html>
  </div>
</f:section>

<style type="text/scss" section="Main">
  @import 'scss/Abstracts/abstract';
  .mstitb_text {
    background-color: red;
  }
</style>
</html>

t3-build compliert diese Komponente in vanilla TYPO3 Templates und CSS.

Fluid-Template 

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
<f:layout name="Default"></f:layout>
<f:section name="Main">
<f:asset.css identifier="mst_site/Extensions/FluidStyledContent/Templates/TextMain" 
  href="EXT:mst_site/Resources/Public/Css/Extensions/FluidStyledContent/Templates/TextMain.css" />
  <div class="mstitb_text">
    <f:format.html>{data.bodytext}</f:format.html>
  </div>
</f:section>
</html>

CSS 

.mstitb_text {
  background-color: red;
}