{"id":524,"date":"2015-01-20T10:26:31","date_gmt":"2015-01-20T09:26:31","guid":{"rendered":"http:\/\/blog.zeit.de\/dev\/?p=524"},"modified":"2015-09-14T08:53:05","modified_gmt":"2015-09-14T06:53:05","slug":"block-element-modifier","status":"publish","type":"post","link":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/","title":{"rendered":"Block, Element, Modifier"},"content":{"rendered":"<p>Das Schwierige an CSS ist, dass es so einfach ist. Obschon\u00a0leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, w\u00e4chst die Codemenge oft exponentiell zur Projektl\u00e4nge an.<!--more--><\/p>\n<p>In <em><a href=\"http:\/\/css-tricks.com\/just-try-and-do-a-good-job\">Just Try and Do a Good Job<\/a><\/em> schreibt Chris Coyier, dass er weder Namenskonventionen noch andere spezielle Methodiken nutzt, um sein CSS zu schreiben. Vielmehr versucht er mithilfe seiner Erfahrung und weniger Richtlinien, immer gute Arbeit<em> (a good job)<\/em> zu machen. Er schr\u00e4nkt dabei ein, dass er haupts\u00e4chlich alleine arbeitet und so seinen Stil leicht einhalten kann. F\u00fcr Teams reicht die Arbeitsanweisung \u00bb<em>Do a good job<\/em>\u00ab selten aus. Zumal oft unterschiedliche Vorstellungen davon herrschen, was genau das denn bedeutet, trotz <a href=\"https:\/\/github.com\/ZeitOnline\/coding-guidelines\">Coding Richtlinien<\/a>.<\/p>\n<p>Das Entwicklungsteam von ZEIT ONLINE hat hier viele, oft schmerzliche Erfahrungen gesammelt. Zu Zeiten des Relaunch 2009 hatten wir f\u00fcr uns einen CSS-Schreibstil entwickelt, der unseren damaligen Arbeitsumst\u00e4nden sehr entgegen kam und am damaligen <em>state of the art<\/em> orientiert war. Leider wissen wir heute, dass wir damit CSS gebaut haben, das zwar gut funktioniert, aber sehr schwierig zu warten ist. Die Weiterentwicklung der Seite f\u00fchrt zu <a href=\"http:\/\/cssstats.com\/stats?link=http%3A%2F%2Fcss.zeit.de%2Fstatic%2Fcss%2Fzon.css\">immer mehr Code<\/a>. Da nie ganz klar ist, welcher Code wo noch in Gebrauch ist, ist es gef\u00e4hrlich, eigentlich \u00fcberfl\u00fcssigen Code zu entfernen. Der sogenannte <em>code bloat<\/em> <a href=\"http:\/\/benfrain.com\/css-performance-revisited-selectors-bloat-expensive-styles\/\">kann die Website-Performance aber schnell verschlechtern<\/a>. Wir haben nat\u00fcrlich immer wieder an dem Problem gearbeitet, aber die gew\u00fcnschten Performance-Werte letztlich nie erreichen k\u00f6nnen \u2013 oder auch nur unsere Entwickler besonders entlasten.<\/p>\n<p class=\"slideshare_wrapper\">\n\n<div class=\"embed-wrapper embed-wrapper--blocked js-embed-consent\" data-method=\"iframe\">\n<script class=\"raw__source\" type=\"text\/template\"><iframe loading=\"lazy\" class=\"slideshare_frame\" frameborder=\"0\" height=\"260\" marginheight=\"0\" marginwidth=\"0\" scrolling=\"no\" src=\"\/\/www.slideshare.net\/slideshow\/embed_code\/43347864\" width=\"100%\"><\/iframe><\/script>\n<div class=\"embed-wrapper__inner\">\n<div class=\"embed-wrapper__text\">\n<h3>Empfohlener redaktioneller Inhalt<\/h3>\n<p data-replace=\"no\">An dieser Stelle finden Sie externen Inhalt, der den Artikel erg\u00e4nzt. Sie k\u00f6nnen sich externe Inhalte mit einem Klick anzeigen lassen und wieder ausblenden.<noscript>Bitte aktivieren Sie JavaScript damit Sie diesen Inhalt anzeigen k\u00f6nnen.<\/noscript><\/p>\n<\/div>\n<div class=\"embed-consent\">\n<label class=\"embed-consent__toggle\">\n<input class=\"js-embed-consent__toggle\" type=\"checkbox\" autocomplete=\"off\">\n<span><\/span>\nExterner Inhalt\n<\/label>\n<a href=\"https:\/\/www.zeit.de\/hilfe\/datenschutz\" target=\"_blank\" class=\"embed-consent__datalink-when-active\">Datenschutzerkl\u00e4rung<\/a>\n<\/div>\n<div class=\"embed-wrapper__footer\">\n<p data-replace=\"no\">\nIch bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit k\u00f6nnen personenbezogene Daten an Drittplattformen \u00fcbermittelt werden. <a href=\"https:\/\/www.zeit.de\/hilfe\/datenschutz\" target=\"_blank\">Mehr dazu in unserer Datenschutzerkl\u00e4rung.<\/a>\n<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/p>\n<p>Aus diesem Grund haben wir uns f\u00fcr die Einf\u00fchrung der sehr rigiden Namenskonvention <a href=\"http:\/\/bem.info\">BEM<\/a> entschieden. BEM steht f\u00fcr <em>Block, Element, Modifier<\/em>, was schon die drei Entit\u00e4ten beschreibt, in die wir unseren CSS-Code in Zukunft unterteilen. Bl\u00f6cke sind unabh\u00e4ngige Einheiten in einer Website, die f\u00fcr sich allein stehen k\u00f6nnen und einen Teil der Nutzeroberfl\u00e4che repr\u00e4sentieren. Dies kann beispielsweise ein Logo, ein Suchformular oder ein Men\u00fc sein. Bl\u00f6cke k\u00f6nnen weitere Bl\u00f6cke enthalten, was sie von den Elementen unterscheidet. Diese sind f\u00fcr sich allein gestellt nutzlos, funktionieren nur in ihrem Block. Zu guter Letzt gibt es noch Modifikatoren. Das sind zus\u00e4tzliche Klassen, die an Bl\u00f6cke oder Elemente geschrieben werden, um unterschiedliche Status abzubilden. Alle Bl\u00f6cke, Elemente und die Modifikatoren werden durch Klassen repr\u00e4sentiert, die per Benennung grob ihre Aufgabe und genau ihre Beziehung zueinander ausdr\u00fccken. Im Stylesheet wird ausschlie\u00dflich mit diesen Klassen gearbeitet, alle anderen Selektoren sind quasi verboten.<\/p>\n<blockquote style=\"font-style: italic;\">\n<p style=\"margin-bottom: 0px;\">The one &#8222;rule&#8220;ish thing I really believe in: keep your selector specificities fairly low and flat across your whole project. \u2014 <a href=\"http:\/\/css-tricks.com\/just-try-and-do-a-good-job\">Chris Coyier<\/a><\/p>\n<\/blockquote>\n<p>Die Namenskonvention mit den doppelten Unterstrichen oder Minuszeichen \u2013 die man durchaus nach seinen Vorstellungen \u00e4ndern kann \u2013 und das zweifelsohne hohe Aufkommen an Klassen-Attributen im <abbr title=\"Hypertext Markup Language\">HTML<\/abbr> wirken zun\u00e4chst etwas ungew\u00f6hnlich. Die einzelnen Bl\u00f6cke werden dadurch voneinander v\u00f6llig unabh\u00e4ngig. Sie k\u00f6nnen leicht und sicher editiert werden. Die <a href=\"https:\/\/developer.mozilla.org\/de\/docs\/Web\/CSS\/Spezifit%C3%A4t\">Spezifit\u00e4t<\/a> aller Elemente ist auf zwei Stufen festgezurrt, die <a href=\"http:\/\/wiki.selfhtml.org\/wiki\/CSS\/Kaskade\">Kaskade<\/a> damit au\u00dfer Kraft gesetzt. Aber gerade das hilft; vor allem in den ganz gro\u00dfen Projekten, in denen nicht mehr jeder jeden Codeblock kennt. Was also zun\u00e4chst nach zus\u00e4tzlicher Arbeit aussieht, kommt der Realit\u00e4t der Entwicklung und vor allem der Weiterentwicklung einer Nachrichtenseite sehr entgegen. Ziel ist es letztendlich, Code zu schreiben, der gut und sicher zu modifizieren ist. Diese Anforderung ist durch die vollst\u00e4ndige Modularisierung und die flache Hierarchie der Klassen in BEM erf\u00fcllt.<\/p>\n<p>Den Aufwand, den der Einsatz einer solchen Namenskonvention mit sich bringt, fangen wir durch Tools wie <abbr title=\"Syntactally awesome stylesheets\">Sass<\/abbr> (<a href=\"http:\/\/mikefowler.me\/2013\/10\/17\/support-for-bem-modules-sass-3.3\/\">siehe auch BEM-Notation<\/a>) oder <a href=\"http:\/\/gruntjs.com\">grunt<\/a> zumindest zum Teil wieder ab. In der Automatisierung liegt dann auch die M\u00f6glichkeit, den Code laufend zu pr\u00fcfen und zu messen. Und nur wer misst, kann seine Performance erh\u00f6hen.<\/p>\n<p><em>Nico Br\u00fcnjes ist Teamleiter Frontend bei ZEIT ONLINE.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Das Schwierige an CSS ist, dass es so einfach ist. Obschon\u00a0leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, w\u00e4chst die Codemenge oft exponentiell zur Projektl\u00e4nge an.<\/p>\n","protected":false},"author":183,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[16],"tags":[],"class_list":["post-524","post","type-post","status-publish","format-standard","hentry","category-allgemein"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Block, Element, Modifier - Dev-Blog<\/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:\/\/blog.zeit.de\/dev\/block-element-modifier\/\" \/>\n<meta property=\"og:locale\" content=\"de_DE\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Block, Element, Modifier - Dev-Blog\" \/>\n<meta property=\"og:description\" content=\"Das Schwierige an CSS ist, dass es so einfach ist. Obschon\u00a0leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, w\u00e4chst die Codemenge oft exponentiell zur Projektl\u00e4nge an.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/\" \/>\n<meta property=\"og:site_name\" content=\"Dev-Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-20T09:26:31+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-09-14T06:53:05+00:00\" \/>\n<meta name=\"author\" content=\"Nico Br\u00fcnjes\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Geschrieben von\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nico Br\u00fcnjes\" \/>\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\":\"WebPage\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/\",\"url\":\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/\",\"name\":\"Block, Element, Modifier - Dev-Blog\",\"isPartOf\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\"},\"datePublished\":\"2015-01-20T09:26:31+00:00\",\"dateModified\":\"2015-09-14T06:53:05+00:00\",\"author\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/e6b001f16e0a514e509cfa4b7f958890\"},\"breadcrumb\":{\"@id\":\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/#breadcrumb\"},\"inLanguage\":\"de\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Startseite\",\"item\":\"https:\/\/blog.zeit.de\/dev\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Block, Element, Modifier\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#website\",\"url\":\"https:\/\/blog.zeit.de\/dev\/\",\"name\":\"Dev-Blog\",\"description\":\"Entwicklungsblog von ZEIT ONLINE\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"de\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/e6b001f16e0a514e509cfa4b7f958890\",\"name\":\"Nico Br\u00fcnjes\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"de\",\"@id\":\"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/542792796936cd43881199de8ca30b2dc75399782aed04cecf6cd96b12090979?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/542792796936cd43881199de8ca30b2dc75399782aed04cecf6cd96b12090979?s=96&d=mm&r=g\",\"caption\":\"Nico Br\u00fcnjes\"},\"sameAs\":[\"http:\/\/www.zeit.de\"],\"url\":\"https:\/\/blog.zeit.de\/dev\/author\/bruenjes\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Block, Element, Modifier - Dev-Blog","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:\/\/blog.zeit.de\/dev\/block-element-modifier\/","og_locale":"de_DE","og_type":"article","og_title":"Block, Element, Modifier - Dev-Blog","og_description":"Das Schwierige an CSS ist, dass es so einfach ist. Obschon\u00a0leicht erlernt, ist es jedoch schwer zu strukturieren und wirkt oft undurchschaubar. Findet man keinen sauberen Weg, seinen Code zu organisieren, w\u00e4chst die Codemenge oft exponentiell zur Projektl\u00e4nge an.","og_url":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/","og_site_name":"Dev-Blog","article_published_time":"2015-01-20T09:26:31+00:00","article_modified_time":"2015-09-14T06:53:05+00:00","author":"Nico Br\u00fcnjes","twitter_card":"summary_large_image","twitter_misc":{"Geschrieben von":"Nico Br\u00fcnjes","Gesch\u00e4tzte Lesezeit":"3\u00a0Minuten"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/","url":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/","name":"Block, Element, Modifier - Dev-Blog","isPartOf":{"@id":"https:\/\/blog.zeit.de\/dev\/#website"},"datePublished":"2015-01-20T09:26:31+00:00","dateModified":"2015-09-14T06:53:05+00:00","author":{"@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/e6b001f16e0a514e509cfa4b7f958890"},"breadcrumb":{"@id":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/#breadcrumb"},"inLanguage":"de","potentialAction":[{"@type":"ReadAction","target":["https:\/\/blog.zeit.de\/dev\/block-element-modifier\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/blog.zeit.de\/dev\/block-element-modifier\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Startseite","item":"https:\/\/blog.zeit.de\/dev\/"},{"@type":"ListItem","position":2,"name":"Block, Element, Modifier"}]},{"@type":"WebSite","@id":"https:\/\/blog.zeit.de\/dev\/#website","url":"https:\/\/blog.zeit.de\/dev\/","name":"Dev-Blog","description":"Entwicklungsblog von ZEIT ONLINE","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/blog.zeit.de\/dev\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"de"},{"@type":"Person","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/e6b001f16e0a514e509cfa4b7f958890","name":"Nico Br\u00fcnjes","image":{"@type":"ImageObject","inLanguage":"de","@id":"https:\/\/blog.zeit.de\/dev\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/542792796936cd43881199de8ca30b2dc75399782aed04cecf6cd96b12090979?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/542792796936cd43881199de8ca30b2dc75399782aed04cecf6cd96b12090979?s=96&d=mm&r=g","caption":"Nico Br\u00fcnjes"},"sameAs":["http:\/\/www.zeit.de"],"url":"https:\/\/blog.zeit.de\/dev\/author\/bruenjes\/"}]}},"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/524","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/users\/183"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/comments?post=524"}],"version-history":[{"count":37,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/524\/revisions"}],"predecessor-version":[{"id":646,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/posts\/524\/revisions\/646"}],"wp:attachment":[{"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/media?parent=524"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/categories?post=524"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.zeit.de\/dev\/wp-json\/wp\/v2\/tags?post=524"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}