{"id":11347,"date":"2025-02-26T09:00:00","date_gmt":"2025-02-26T08:00:00","guid":{"rendered":"https:\/\/wata.es\/?p=11347"},"modified":"2026-02-04T09:11:27","modified_gmt":"2026-02-04T08:11:27","slug":"bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit","status":"publish","type":"post","link":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/","title":{"rendered":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit"},"content":{"rendered":"\n<p>Wenn wir mit Angular arbeiten, ist die Organisation des CSS-Codes entscheidend, um ein skalierbares und leicht wartbares Projekt zu gew\u00e4hrleisten. Eine der am h\u00e4ufigsten verwendeten Methoden zur Strukturierung von Styles ist BEM (Block, Element, Modifier).<\/p>\n\n\n\n<p>In diesem Artikel erkl\u00e4ren wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Au\u00dferdem gehen wir auf seine Vorteile und bew\u00e4hrten Praktiken ein.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Was ist BEM?<\/strong><\/h2>\n\n\n\n<p>BEM ist ein Ansatz zur Benennung von CSS-Klassen, der darauf abzielt, die Struktur, Klarheit und Wartbarkeit des Codes zu verbessern.<\/p>\n\n\n\n<p>Die Namenskonvention f\u00fcr Bl\u00f6cke, Elemente und Modifikatoren ist wie folgt:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Block:<\/strong> Ein eigenst\u00e4ndiges Komponentenelement, das mehrere Teile gruppiert.<\/li>\n\n\n\n<li><strong>Element:<\/strong> Bestandteile eines Blocks, die ihn zusammenstellen.<\/li>\n\n\n\n<li><strong>Modifier:<\/strong> Ver\u00e4ndert das Erscheinungsbild oder Verhalten eines Blocks oder Elements.<\/li>\n<\/ul>\n\n\n\n<pre class=\"wp-block-code\"><code>.block { }\n.block__element { }\n.block--modifier { }\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Warum die BEM-Methodik in Angular anwenden?<\/strong><\/h2>\n\n\n\n<p>Angular basiert auf Komponenten, sodass die Anwendung von BEM ideal ist. Au\u00dferdem wird sie dadurch beg\u00fcnstigt, dass jede Komponente ihre eigene CSS- oder SCSS-Datei hat. Schauen wir uns ein praktisches Beispiel an.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>Beispiel f\u00fcr BEM in einer Angular-Komponente<\/strong><\/h3>\n\n\n\n<p>Angenommen, wir haben eine <strong>Card<\/strong>-Komponente. Dazu geh\u00f6ren zwei Dateien: die HTML-Struktur und die CSS- oder SCSS-Style.<\/p>\n\n\n\n<p><strong>HTML-Struktur (card.component.html)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\"&gt;\n  &lt;h2 class=\"card__title\"&gt;T\u00edtulo del Producto&lt;\/h2&gt;\n  &lt;p class=\"card__description\"&gt;Descripci\u00f3n breve del producto.&lt;\/p&gt;\n  &lt;button class=\"card__button card__button--primary\"&gt;Comprar&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<p><strong><strong>Formatvorlagen mit BEM (card.component.scss)<\/strong><\/strong>In diesem Beispiel sehen wir, dass der Hauptblock die Klasse <strong>card<\/strong> enth\u00e4lt, zu der die untergeordneten Elemente <strong>card__title<\/strong>, <strong>card__description<\/strong> und <strong>card__button<\/strong> geh\u00f6ren. Dadurch wird eine hierarchische Struktur sowohl im HTML als auch im CSS beibehalten.<\/p>\n\n\n\n<p>Der <strong>&amp;__<\/strong>-Selektor wird verwendet, um die Elemente eines Blocks zu kennzeichnen, w\u00e4hrend der <strong>&amp;&#8211;<\/strong>-Selektor f\u00fcr Modifikatoren genutzt wird. In unserem Fall hat <strong>card__button<\/strong> den Modifikator <strong>primary<\/strong>, der nach folgender Syntax angegeben wird:<\/p>\n\n\n\n<p><strong>card__button card__button&#8211;primary<\/strong>.<\/p>\n\n\n\n<p>Auf diese Weise k\u00f6nnen wir die ben\u00f6tigten Modifikatoren anwenden. Zudem k\u00f6nnen wir dank des komponentenbasierten Potenzials von Angular jeden Modifikator dynamisch auswerten, der \u00fcbergeben wird. Zum Beispiel k\u00f6nnen wir im folgenden Fall den Modifikator mit <code>ngClass<\/code> einf\u00fcgen, abh\u00e4ngig von der Variablen <code>primary<\/code>, wenn diese den Wert <code>true<\/code> hat.<\/p>\n\n\n\n<p><strong>HTML-Struktur mit bedingtem Modifikator (card.component.html)<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;div class=\"card\"&gt;\n  &lt;h2 class=\"card__title\"&gt;T\u00edtulo del Producto&lt;\/h2&gt;\n  &lt;p class=\"card__description\"&gt;Descripci\u00f3n breve del producto.&lt;\/p&gt;\n  &lt;button \n    class=\"card__button\n    &#91;ngClass]=\"primary ? 'card__button--primary' : ''\"\n  &gt;Comprar&lt;\/button&gt;\n&lt;\/div&gt;\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Vorteile der Verwendung von BEM in Angular<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Modularit\u00e4t und Wiederverwendbarkeit<\/strong><\/h3>\n\n\n\n<p>Jede Komponente in Angular ist gekapselt, so dass Stile definiert werden k\u00f6nnen, ohne andere Elemente der Anwendung zu beeintr\u00e4chtigen. Mit BEM wird diese Modularit\u00e4t verst\u00e4rkt, so dass Bl\u00f6cke auf flexible Weise wiederverwendet werden k\u00f6nnen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Skalierbarkeit<\/strong><\/h3>\n\n\n\n<p>Gro\u00dfe Projekte k\u00f6nnen ohne Komplikationen wachsen, da BEM das Hinzuf\u00fcgen neuer Stile und Komponenten ohne unerwartete St\u00f6rungen erleichtert.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Wartbarkeit<\/strong><\/h3>\n\n\n\n<p>Durch die klare Struktur von BEM ist der Code leicht zu lesen und zu verstehen, was den Entwicklern hilft, das Projekt im Laufe der Zeit zu pflegen, ohne dass ein gr\u00f6\u00dferes Refactoring erforderlich ist.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Beste Praktiken bei der Verwendung von BEM in Angular<\/strong><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>1. Tief verschachtelte Selektoren vermeiden<\/strong><strong><\/strong><\/h3>\n\n\n\n<p>In Angular ist es \u00fcblich, dass Selektoren gekapselt sind. Ein \u00fcberm\u00e4\u00dfiger Einsatz von tief verschachtelten Selektoren kann jedoch den Code weniger wartbar machen. Es wird empfohlen, die BEM-Struktur sauber zu halten, ohne unn\u00f6tige Verschachtelungen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>2. Konsistenz bei der Benennung<\/strong><strong><\/strong><\/h3>\n\n\n\n<p>Die Verwendung eines einheitlichen Formats f\u00fcr alle Komponenten sorgt f\u00fcr eine bessere Zusammenarbeit im Team. Das Festlegen interner Richtlinien hilft, die Koh\u00e4renz im Projekt zu wahren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><strong>3. Verwendung von Variablen und Mixins in SCSS<\/strong><\/h3>\n\n\n\n<p>SCSS erm\u00f6glicht das Definieren von Variablen und Mixins, um die Wiederverwendbarkeit des Codes zu verbessern. Es ist ratsam, diese mit der BEM-Methodologie zu kombinieren, um einen effizienteren Code zu erzielen.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>$primary-color: #007bff;\n\n.card {\n  background-color: #f5f5f5;\n  padding: 20px;\n  border-radius: 8px;\n\n  &amp;__title {\n    font-size: 1.5rem;\n    color: #333;\n  }\n\n  &amp;__button {\n    @mixin button-style($bg-color) {\n      padding: 10px 20px;\n      border: none;\n      cursor: pointer;\n      background-color: $bg-color;\n      color: #fff;\n    }\n\n    &amp;--primary {\n      @include button-style($primary-color);\n    }\n  }\n}\n<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Schlussfolgerung<\/strong><\/h2>\n\n\n\n<p>Durch den Einsatz von BEM in Angular erhalten wir einen saubereren, besser organisierten und wartbaren Code. Dank ihrer klaren Struktur verbessert diese Methodik die Skalierbarkeit und die Zusammenarbeit im Team.<\/p>\n\n\n\n<p>Wata Factory ist f\u00fchrend in den neuesten Technologien und betrachtet BEM als eine sehr leistungsstarke und n\u00fctzliche Methodik f\u00fcr die Anwendung in unseren Angular-Projekten.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Wenn wir mit Angular arbeiten, ist die Organisation des CSS-Codes entscheidend, um ein skalierbares und leicht wartbares Projekt zu gew\u00e4hrleisten. Eine der am h\u00e4ufigsten verwendeten Methoden zur Strukturierung von Styles ist BEM (Block, Element, Modifier). In diesem Artikel erkl\u00e4ren wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Au\u00dferdem gehen [&hellip;]<\/p>\n","protected":false},"author":42,"featured_media":15821,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[68,181],"tags":[80,349],"class_list":["post-11347","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-neuigkeiten","category-technologie","tag-angular-de","tag-bem-de"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.3 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory\" \/>\n<meta property=\"og:description\" content=\"Wenn wir mit Angular arbeiten, ist die Organisation des CSS-Codes entscheidend, um ein skalierbares und leicht wartbares Projekt zu gew\u00e4hrleisten. Eine der am h\u00e4ufigsten verwendeten Methoden zur Strukturierung von Styles ist BEM (Block, Element, Modifier). In diesem Artikel erkl\u00e4ren wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Au\u00dferdem gehen [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/\" \/>\n<meta property=\"og:site_name\" content=\"WATA Factory\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/watafactory\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-02-26T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-02-04T08:11:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp\" \/>\n\t<meta property=\"og:image:width\" content=\"2560\" \/>\n\t<meta property=\"og:image:height\" content=\"1440\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/webp\" \/>\n<meta name=\"author\" content=\"Juan Castillo Diaz\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@watafactory\" \/>\n<meta name=\"twitter:site\" content=\"@watafactory\" \/>\n<meta name=\"twitter:label1\" content=\"Verfasst von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Juan Castillo Diaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Gesch\u00e4tzte Lesezeit\" \/>\n\t<meta name=\"twitter:data2\" content=\"3\u00a0Minuten\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/\"},\"author\":{\"name\":\"Juan Castillo Diaz\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/4cfe3a1b4c16256c515d39315fc03450\"},\"headline\":\"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit\",\"datePublished\":\"2025-02-26T08:00:00+00:00\",\"dateModified\":\"2026-02-04T08:11:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/\"},\"wordCount\":639,\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bem-in-angular-1-scaled-DE.webp\",\"keywords\":[\"Angular\",\"BEM\"],\"articleSection\":[\"Neuigkeiten\",\"Technologie\"],\"inLanguage\":\"de\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/\",\"name\":\"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bem-in-angular-1-scaled-DE.webp\",\"datePublished\":\"2025-02-26T08:00:00+00:00\",\"dateModified\":\"2026-02-04T08:11:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bem-in-angular-1-scaled-DE.webp\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2025\\\/02\\\/bem-in-angular-1-scaled-DE.webp\",\"width\":2560,\"height\":1440,\"caption\":\"Entwickler programmiert auf einem Laptop mit Programmiersprachen-Symbolen und Bin\u00e4rcode-Hintergrund\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wata.es\\\/de\\\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wata.es\\\/de\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wata.es\\\/#website\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"name\":\"WATA Factory\",\"description\":\"IT Consulting &amp; Outsourcing for your company\",\"publisher\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wata.es\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"de\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wata.es\\\/#organization\",\"name\":\"WATA Factory\",\"url\":\"https:\\\/\\\/wata.es\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"contentUrl\":\"https:\\\/\\\/wata.es\\\/wp-content\\\/uploads\\\/2019\\\/12\\\/logowata.png\",\"width\":688,\"height\":176,\"caption\":\"WATA Factory\"},\"image\":{\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/watafactory\\\/\",\"https:\\\/\\\/x.com\\\/watafactory\",\"https:\\\/\\\/www.linkedin.com\\\/company\\\/wata\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wata.es\\\/#\\\/schema\\\/person\\\/4cfe3a1b4c16256c515d39315fc03450\",\"name\":\"Juan Castillo Diaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g\",\"caption\":\"Juan Castillo Diaz\"},\"url\":\"https:\\\/\\\/wata.es\\\/de\\\/author\\\/juancastillo\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/","og_locale":"de_DE","og_type":"article","og_title":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory","og_description":"Wenn wir mit Angular arbeiten, ist die Organisation des CSS-Codes entscheidend, um ein skalierbares und leicht wartbares Projekt zu gew\u00e4hrleisten. Eine der am h\u00e4ufigsten verwendeten Methoden zur Strukturierung von Styles ist BEM (Block, Element, Modifier). In diesem Artikel erkl\u00e4ren wir, was BEM ist und wie man es in Angular mit einfachen Beispielen anwendet. Au\u00dferdem gehen [&hellip;]","og_url":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/","og_site_name":"WATA Factory","article_publisher":"https:\/\/www.facebook.com\/watafactory\/","article_published_time":"2025-02-26T08:00:00+00:00","article_modified_time":"2026-02-04T08:11:27+00:00","og_image":[{"width":2560,"height":1440,"url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp","type":"image\/webp"}],"author":"Juan Castillo Diaz","twitter_card":"summary_large_image","twitter_creator":"@watafactory","twitter_site":"@watafactory","twitter_misc":{"Verfasst von":"Juan Castillo Diaz","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#article","isPartOf":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/"},"author":{"name":"Juan Castillo Diaz","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450"},"headline":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit","datePublished":"2025-02-26T08:00:00+00:00","dateModified":"2026-02-04T08:11:27+00:00","mainEntityOfPage":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/"},"wordCount":639,"publisher":{"@id":"https:\/\/wata.es\/#organization"},"image":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp","keywords":["Angular","BEM"],"articleSection":["Neuigkeiten","Technologie"],"inLanguage":"de"},{"@type":"WebPage","@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/","url":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/","name":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit - WATA Factory","isPartOf":{"@id":"https:\/\/wata.es\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#primaryimage"},"image":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#primaryimage"},"thumbnailUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp","datePublished":"2025-02-26T08:00:00+00:00","dateModified":"2026-02-04T08:11:27+00:00","breadcrumb":{"@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/"]}]},{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#primaryimage","url":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2025\/02\/bem-in-angular-1-scaled-DE.webp","width":2560,"height":1440,"caption":"Entwickler programmiert auf einem Laptop mit Programmiersprachen-Symbolen und Bin\u00e4rcode-Hintergrund"},{"@type":"BreadcrumbList","@id":"https:\/\/wata.es\/de\/bem-in-angular-verbesserung-der-css-wartbarkeit-und-skalierbarkeit\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wata.es\/de\/"},{"@type":"ListItem","position":2,"name":"BEM in Angular: Verbesserung der CSS-Wartbarkeit und Skalierbarkeit"}]},{"@type":"WebSite","@id":"https:\/\/wata.es\/#website","url":"https:\/\/wata.es\/","name":"WATA Factory","description":"IT Consulting &amp; Outsourcing for your company","publisher":{"@id":"https:\/\/wata.es\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wata.es\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"de"},{"@type":"Organization","@id":"https:\/\/wata.es\/#organization","name":"WATA Factory","url":"https:\/\/wata.es\/","logo":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/","url":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","contentUrl":"https:\/\/wata.es\/wp-content\/uploads\/2019\/12\/logowata.png","width":688,"height":176,"caption":"WATA Factory"},"image":{"@id":"https:\/\/wata.es\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/watafactory\/","https:\/\/x.com\/watafactory","https:\/\/www.linkedin.com\/company\/wata\/"]},{"@type":"Person","@id":"https:\/\/wata.es\/#\/schema\/person\/4cfe3a1b4c16256c515d39315fc03450","name":"Juan Castillo Diaz","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/415b2a6e314eac164ae150aac8c09d7d2cdc54f7c0b1c28b8e0360140cc449bc?s=96&d=mm&r=g","caption":"Juan Castillo Diaz"},"url":"https:\/\/wata.es\/de\/author\/juancastillo\/"}]}},"_links":{"self":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11347","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/users\/42"}],"replies":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/comments?post=11347"}],"version-history":[{"count":5,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11347\/revisions"}],"predecessor-version":[{"id":15824,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/posts\/11347\/revisions\/15824"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media\/15821"}],"wp:attachment":[{"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/media?parent=11347"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/categories?post=11347"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wata.es\/de\/wp-json\/wp\/v2\/tags?post=11347"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}