{"id":25580417,"url":"https://github.com/tderflinger/css-styleguide","last_synced_at":"2025-07-07T14:33:39.235Z","repository":{"id":137351269,"uuid":"132864979","full_name":"tderflinger/css-styleguide","owner":"tderflinger","description":"Airbnb CSS / Sass Styleguide in German","archived":false,"fork":false,"pushed_at":"2018-05-14T19:18:38.000Z","size":133,"stargazers_count":8,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-02T04:07:54.219Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tderflinger.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-05-10T07:32:37.000Z","updated_at":"2024-01-25T18:26:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"4f38069d-7257-4bac-90fe-99ecf0f787bc","html_url":"https://github.com/tderflinger/css-styleguide","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/tderflinger/css-styleguide","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Fcss-styleguide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Fcss-styleguide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Fcss-styleguide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Fcss-styleguide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tderflinger","download_url":"https://codeload.github.com/tderflinger/css-styleguide/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tderflinger%2Fcss-styleguide/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":264092304,"owners_count":23556268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-02-21T04:16:01.699Z","updated_at":"2025-07-07T14:33:39.228Z","avatar_url":"https://github.com/tderflinger.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# Airbnb CSS / Sass Styleguide auf Deutsch\n\n*Ein meist vernünftiger Ansatz für CSS und Sass*\n\n## Inhaltsverzeichnis\n\n1. [Terminologie](#terminologie)\n    - [Regeldeklaration](#regeldeklaration)\n    - [Selektoren](#selektoren)\n    - [Eigenschaften](#eigenschaften)\n1. [CSS](#css)\n    - [Formatierung](#formatierung)\n    - [Kommentare](#kommentare)\n    - [OOCSS und BEM](#oocss-und-bem)\n    - [ID Selektoren](#id-selektoren)\n    - [JavaScript-Haken](#javascript-haken)\n    - [Rahmen](#rahmen)\n1. [Sass](#sass)\n    - [Syntax](#syntax)\n    - [Ordnung](#ordnung)\n    - [Variablen](#variablen)\n    - [Mixins](#mixins)\n    - [Extend Anweisung](#extend-anweisung)\n    - [Verschachtelte Selektoren](#verschachtelte-selektoren)\n1. [Übersetzungen](#ubersetzungen)\n1. [Lizenz](#lizenz)\n\n## Terminologie\n\n### Regeldeklaration\n\nEine \"Regeldeklaration\" ist der Name eines Selektors (oder einer Gruppe von Selektoren) mit einer zugehörigen Gruppe von Eigenschaften. Hier ist ein Beispiel:\n\n```css\n.listing {\n  font-size: 18px;\n  line-height: 1.2;\n}\n```\n\n### Selektoren\n\nIn einer Regeldeklaration sind \"Selektoren\" die Werte, die bestimmen, welche Elemente im DOM-Baum durch die definierten Eigenschaften gestylt werden. Selektoren können sowohl HTML-Elemente als auch die Klasse, ID oder eines der Attribute eines Elements abgleichen. Hier sind einige Beispiele von Selektoren:\n\n```css\n.my-element-class {\n  /* ... */\n}\n\n[aria-hidden] {\n  /* ... */\n}\n```\n\n### Eigenschaften\n\nSchließlich geben Eigenschaften den ausgewählten Elementen einer Regeldeklaration ihren Stil. Eigenschaften sind Schlüssel-Wert-Paare, und eine Regeldeklaration kann eine oder mehrere Eigenschaftsdeklarationen enthalten. Eigenschaftsdeklarationen sehen so aus:\n\n```css\n/* some selector */ {\n  background: #f1f1f1;\n  color: #333;\n}\n```\n\n**[⬆ nach oben](#inhaltsverzeichnis)**\n\n## CSS\n\n### Formatierung\n\n* Verwende Soft Tabs (2 Leerzeichen) für die Einrückung.\n* Bevorzuge Bindestriche gegenüber camelCasing in Klassennamen.\n  - Unterstriche und PascalCasing sind in Ordnung, wenn Sie BEM verwenden (siehe [OOCSS und BEM](#oocss-und-bem) unten).\n* Nutze keine ID Selektoren\n* Wenn Du mehrere Selektoren in einer Regeldeklaration verwenden, gib jedem Selektor eine eigene Zeile.\n* Setze ein Leerzeichen vor die öffnende Klammer `{` in Regeldeklarationen.\n* Setze in Eigenschaften ein Leerzeichen nach, aber nicht vor dem Zeichen `:`\n* Setze schließende Klammern `}` von Regeldeklarationen auf eine neue Zeile.\n* Setze Leerzeilen zwischen Regeldeklarationen.\n\n**Schlecht**\n\n```css\n.avatar{\n    border-radius:50%;\n    border:2px solid white; }\n.no, .nope, .not_good {\n    // ...\n}\n#lol-no {\n  // ...\n}\n```\n\n**Gut**\n\n```css\n.avatar {\n  border-radius: 50%;\n  border: 2px solid white;\n}\n\n.one,\n.selector,\n.per-line {\n  // ...\n}\n```\n\n### Kommentare\n\n* Bevorzuge Zeilen-Kommentare (`//` in Sass-Land), vor Blockkommentaren.\n* Bevorzuge Kommentare auf einer eigenen Zeile. Vermeide Kommentare am Zeilenende.\n* Schreibe detaillierte Kommentare für Code, der nicht selbstdokumentierend ist:\n  - Nutzung des z-index\n  - Kompatibilität oder browserspezifische Hacks\n\n### OOCSS und BEM\n\nAus diesen Gründen empfehlen wir eine Kombination von OOCSS und BEM:\n\n  * Es hilft, klare, strenge Beziehungen zwischen CSS und HTML zu schaffen.\n  * Es hilft uns, wiederverwendbare, zusammensetzbare Komponenten zu schaffen.\n  * Es ermöglicht eine geringere Verschachtelung und eine geringere Spezifizität.\n  * Es hilft bei der Erstellung skalierbarer Stylesheets.\n\n**OOCSS**, oder \"Object Oriented CSS\", ist ein Ansatz zum Schreiben von CSS, der Dich dazu anregt, Deine Stylesheets als eine Sammlung von \"Objekten\" zu betrachten: wiederverwendbare, wiederholbare Schnipsel, die unabhängig voneinander auf einer Website verwendet werden können.\n\n  * Nicole Sullivan's [OOCSS wiki](https://github.com/stubbornella/oocss/wiki) (Englisch)\n  * Smashing Magazine's [Introduction to OOCSS](http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/) (Englisch)\n\n**BEM**, oder \"Block-Element-Modifier\", ist eine _Namenskonvention_ für Klassen in HTML und CSS. Es wurde ursprünglich von Yandex mit großen Codebasen und Skalierbarkeit im Auge entwickelt und kann als eine solide Reihe von Richtlinien für die Umsetzung von OOCSS dienen.\n\n  * CSS Trick's [BEM 101](https://css-tricks.com/bem-101/) (Englisch)\n  * Harry Roberts' [introduction to BEM](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/) (Englisch)\n\nWir empfehlen eine Variante von BEM mit PascalCased \"Blöcken\", die in Kombination mit Komponenten (z.B. React) besonders gut funktioniert. Unterstriche und Bindestriche werden weiterhin für Modifikatoren und Kinder verwendet.\n\n**Beispiel**\n\n```jsx\n// ListingCard.jsx\nfunction ListingCard() {\n  return (\n    \u003carticle class=\"ListingCard ListingCard--featured\"\u003e\n\n      \u003ch1 class=\"ListingCard__title\"\u003eAdorable 2BR in the sunny Mission\u003c/h1\u003e\n\n      \u003cdiv class=\"ListingCard__content\"\u003e\n        \u003cp\u003eVestibulum id ligula porta felis euismod semper.\u003c/p\u003e\n      \u003c/div\u003e\n\n    \u003c/article\u003e\n  );\n}\n```\n\n```css\n/* ListingCard.css */\n.ListingCard { }\n.ListingCard--featured { }\n.ListingCard__title { }\n.ListingCard__content { }\n```\n\n  * `.ListingCard` ist der \"Block\" und stellt die übergeordnete Komponente dar.\n  * `.ListingCard__title` ist ein \"Element\" und repräsentiert einen Nachfahren von `.ListingCard`, der hilft, den Block als Ganzes zu bilden.\n  * `.ListingCard--featured` ist ein \"Modifikator\" und repräsentiert einen anderen Zustand oder eine andere Variante des `.ListingCard` Blocks.\n\n### ID Selektoren\n\nEs ist zwar möglich, Elemente nach ID in CSS auszuwählen, sollte aber generell als Anti-Pattern betrachtet werden. ID-Selektoren führen ein unnötig hohes Maß an [Spezifität](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) in Ihre Regeldeklarationen ein und sind nicht wiederverwendbar.\n\nWeitere Informationen zu diesem Thema findest Du im [Artikel von CSS Wizardry's](http://csswizardry.com/2014/07/hacks-for-dealing-with-specificity/) (Englisch) über den Umgang mit der Spezifität.\n\n### JavaScript-Haken\n\nVermeide die Bindung an die gleiche Klasse in Deinem CSS und JavaScript. Das Zusammenführen der beiden führt oft zu einem Minimum an Zeitverschwendung beim Refactoring, wenn ein Entwickler jede Klasse, die er ändert, vergleichen muss. Im schlimmsten Fall haben Entwickler Angst, Änderungen vorzunehmen, aus Sorge, die Funktionalität zu brechen.\n\nWir empfehlen, JavaScript-spezifische Klassen zu erstellen, die mit dem Präfix `.js-` versehen sind:\n\n```html\n\u003cbutton class=\"btn btn-primary js-request-to-book\"\u003eRequest to Book\u003c/button\u003e\n```\n\n### Rahmen\n\nVerwende `0` anstelle von `none`, um anzugeben, dass ein Stil keinen Rahmen hat.\n\n**Schlecht**\n\n```css\n.foo {\n  border: none;\n}\n```\n\n**Gut**\n\n```css\n.foo {\n  border: 0;\n}\n```\n**[⬆ nach oben](#inhaltsverzeichnis)**\n\n## Sass\n\n### Syntax\n\n* Verwende die `.scss` Syntax, niemals die ursprüngliche `.sass` Syntax.\n* Ordne Deine regulären CSS und `@include` Deklarationen logisch an (siehe unten)\n\n### Ordnung\n\n1. Eigenschaftsdeklarationen\n\n    Listet alle Standard-Eigenschaftsdeklarationen auf, alles, was kein `@include` oder ein geschachtelter Selektor ist.\n\n    ```scss\n    .btn-green {\n      background: green;\n      font-weight: bold;\n      // ...\n    }\n    ```\n\n2. `@include` Deklarationen\n\n    Die Gruppierung von `@include` am Ende erleichtert das Lesen des gesamten Selektors.\n\n    ```scss\n    .btn-green {\n      background: green;\n      font-weight: bold;\n      @include transition(background 0.5s ease);\n      // ...\n    }\n    ```\n\n3. Verschachtelte Selektoren\n\n    Verschachtelte Selektoren, _wenn nötig_, gehen zuletzt, und nichts geht ihnen nach. Füge Leerzeichen zwischen Deine Regeldeklarationen und verschachtelten Selektoren sowie zwischen benachbarten verschachtelten Selektoren hinzu. Wende die gleichen Richtlinien wie oben auf Deine verschachtelten Selektoren an.\n\n    ```scss\n    .btn {\n      background: green;\n      font-weight: bold;\n      @include transition(background 0.5s ease);\n\n      .icon {\n        margin-right: 10px;\n      }\n    }\n    ```\n\n### Variablen\n\nBevorzuge Variablennamen mit Bindestrich (z.B. `$my-variable`) gegenüber camelCased oder snake_cased Variablennamen. Es ist zulässig, Variablennamen, die nur innerhalb derselben Datei verwendet werden sollen, einen Unterstrich voranzustellen (z.B. `$_my-variable`).\n\n### Mixins\n\nMixins sollten verwendet werden, um Deinen Code zu verbessern, Klarheit oder abstrakte Komplexität zu schaffen - ähnlich wie gut benannte Funktionen. Mixins, die keine Argumente akzeptieren, können dafür nützlich sein, aber beachte, dass, wenn Du Deine Nutzdaten nicht komprimieren (z.B. gzip), dies zu unnötiger Code-Verdopplung in den resultierenden Stilen beitragen kann.\n\n### Extend Anweisung\n\n`@extend` sollte vermieden werden, da es ein unintuitives und potentiell gefährliches Verhalten hat, besonders wenn es mit verschachtelten Selektoren verwendet wird. Auch das Erweitern von Platzhalter-Selektoren auf oberster Ebene kann zu Problemen führen, wenn sich die Reihenfolge der Selektoren später ändert (z.B. wenn sie sich in anderen Dateien befinden und die Reihenfolge der Dateien verschoben wird). Das Gzipping sollte die meisten Einsparungen verarbeiten, die Du mit `@extend` erzielt hättest, und Du kannst Deine Stylesheets mit Mixins gut verbessern.\n\n### Verschachtelte Selektoren\n\n**Nicht mehr als drei Ebenen tief schachteln!**\n\n```scss\n.page-container {\n  .content {\n    .profile {\n      // STOP!\n    }\n  }\n}\n```\n\nWenn Selektoren so lang werden, schreibst Du wahrscheinlich CSS, das:\n\n* stark gekoppelt an das HTML (zerbrechlich) ist *-ODER-*\n* zu spezifisch (stark) ist *-ODER-*\n* nicht wiederverwendbar ist\n\n\nNochmals: **Verschachtele niemals ID Selektoren!**\n\nWenn Du zuerst einen ID-Selektor verwenden musst (und Du solltest wirklich versuchen, ohne auszukommen), sollten diese niemals verschachtelt werden. Wenn Du Dich dabei erwischst, musst Du Dein Markup erneut überprüfen und herausfinden, warum diese starke Spezifität erforderlich ist. Wenn Du gut geformtes HTML und CSS schreibst, solltest Du dies **niemals** tun müssen.\n\n**[⬆ nach oben](#inhaltsverzeichnis)**\n\n## Übersetzungen\n\n  Der originale Airbnb CSS / Sass Styleguide auf Englisch ist hier abrufbar: https://github.com/airbnb/css\n\n  Dieser Styleguide ist auch in anderen Sprachen verfügbar:\n\n  - ![id](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Indonesia.png) **Bahasa Indonesia**: [mazipan/css-style-guide](https://github.com/mazipan/css-style-guide)\n  - ![tw](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Taiwan.png) **Chinesisch (traditionell)**: [ArvinH/css-style-guide](https://github.com/ArvinH/css-style-guide)\n  - ![cn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/China.png) **Chinesisch (vereinfacht)**: [Zhangjd/css-style-guide](https://github.com/Zhangjd/css-style-guide)\n  - ![fr](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/France.png) **Französisch**: [mat-u/css-style-guide](https://github.com/mat-u/css-style-guide)\n  - ![ja](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Japan.png) **Japanisch**: [nao215/css-style-guide](https://github.com/nao215/css-style-guide)\n  - ![ko](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/South-Korea.png) **Koreanisch**: [CodeMakeBros/css-style-guide](https://github.com/CodeMakeBros/css-style-guide)\n  - ![PT-BR](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Brazil.png) **Portugiesisch (Brasilien)**: [felipevolpatto/css-style-guide](https://github.com/felipevolpatto/css-style-guide)\n  - ![pt-PT](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Portugal.png) **Portugiesisch (Portugal)**: [SandroMiguel/airbnb-css-style-guide](https://github.com/SandroMiguel/airbnb-css-style-guide)\n  - ![ru](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Russia.png) **Russisch**: [Nekorsis/css-style-guide](https://github.com/Nekorsis/css-style-guide)\n  - ![es](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Spain.png) **Spanisch**: [ismamz/guia-de-estilo-css](https://github.com/ismamz/guia-de-estilo-css)\n  - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Vietnam.png) **Vietnamesisch**: [trungk18/css-style-guide](https://github.com/trungk18/css-style-guide)\n  - ![vn](https://raw.githubusercontent.com/gosquared/flags/master/flags/flags/shiny/24/Italy.png) **Italienisch**: [antoniofull/linee-guida-css](https://github.com/antoniofull/linee-guida-css)\n\n\n**[⬆ nach oben](#inhaltsverzeichnis)**\n\n## Lizenz\n\n(The MIT License)\n\nCopyright (c) 2015 Airbnb\n\nPermission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.\n\n**[⬆ nach oben](#inhaltsverzeichnis)**\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftderflinger%2Fcss-styleguide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftderflinger%2Fcss-styleguide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftderflinger%2Fcss-styleguide/lists"}