{"id":15529029,"url":"https://github.com/alexander-schranz/itcss","last_synced_at":"2025-04-23T12:34:56.931Z","repository":{"id":88923360,"uuid":"334649283","full_name":"alexander-schranz/itcss","owner":"alexander-schranz","description":"An article about ITCSS, BEM and Rethinking Design patterns. My favorite way to build websites CSS.","archived":false,"fork":false,"pushed_at":"2021-04-20T19:22:57.000Z","size":212,"stargazers_count":18,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T23:41:17.619Z","etag":null,"topics":["alexander-schranz-article","css","css-methodologies","css-methodology"],"latest_commit_sha":null,"homepage":"","language":"SCSS","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/alexander-schranz.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}},"created_at":"2021-01-31T12:25:14.000Z","updated_at":"2025-03-21T08:56:27.000Z","dependencies_parsed_at":"2023-06-13T04:15:22.552Z","dependency_job_id":null,"html_url":"https://github.com/alexander-schranz/itcss","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexander-schranz%2Fitcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexander-schranz%2Fitcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexander-schranz%2Fitcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/alexander-schranz%2Fitcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/alexander-schranz","download_url":"https://codeload.github.com/alexander-schranz/itcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250435868,"owners_count":21430367,"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":["alexander-schranz-article","css","css-methodologies","css-methodology"],"created_at":"2024-10-02T11:16:01.013Z","updated_at":"2025-04-23T12:34:56.881Z","avatar_url":"https://github.com/alexander-schranz.png","language":"SCSS","readme":"# ITCSS, BEM and Rethinking Design Practices\n\nThe way of writing CSS which did make me happy. 🤗\n\n![Header](images/logos/social.png)\n\n## Introduction\n\nHello 👋,\n\nMy name is Alexander Schranz ([alex_s_](https://twitter.com/alex_s_)) and I'm fulltime Webdeveloper\nworking on the [SULU CMS](https://sulu.io/?utm_source=github\u0026utm_medium=repository\u0026utm_campaign=alex-itcss)\nand did based on that created a lot of websites.\n\nAfter a long time of dissatisfaction I did find some time ago a way\nto structure css the way which did make me happy to work with css.\nThis repository should show the structure and code syntax I used and\nis mostly for me to reference new developers in the team to it.\n\nIt is a combination by the following sources:\n\n - 📐 [ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528) develop by [Harry Roberts (@csswizardry)](https://csswizardry.com/)\n - 🔥 [Rethinking Design Practices](https://www.youtube.com/watch?v=xxbc3wAztl0) by [Mark Dalgleish](https://twitter.com/markdalgleish)\n - ⚒️ [BEM](http://getbem.com/) a css methodology by [Yandex](https://yandex.com/)\n\nAt this place I really want to thank [Harry Roberts](https://twitter.com/csswizardry)\nand [Mark Dalgleish](https://twitter.com/markdalgleish) as they were a\ngreat inspiration how I write CSS today and they share a lot of there\nknowledge ❤️. You definitely should follow them on Twitter.\n\n**Table of Contents**\n\n - [Introduction](#introduction)\n - [ITCSS](#itcss)\n - [Objects](#objects) (Rethinking Design Practices)\n - [BEM](#bem)\n - [Conclusion](#conclusion)\n\n## ITCSS\n\nThe directory structure you will find in the `src` directory comes\nfrom [ITCSS](https://www.creativebloq.com/web-design/manage-large-css-projects-itcss-101517528)\nwhich was build by [Harry Roberts (csswizardry)](https://csswizardry.com/)\na Consultant Web Performance Engineer.\n\nI can really recommend to read the blog on [xfive.co](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture)\nto get more detail. Another example repository beside this one from the\ndeveloper of ITCSS [Harry Roberts](https://csswizardry.com/) can be found on [github.com/inuitcss](https://github.com/inuitcss/inuitcss).\n\nBut here a short overview about the directory structure or how they are called in ITCSS \"Layers\":\n\n![XVISE ITCSS Layers](https://www.xfivecdn.com/xfive/wp-content/uploads/2016/02/01083650/itcss-layers2.svg)\n\n(Source: [xfive.co](https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture))\n\n### ITCSS - `Settings`\n\nThe settings will just define scss variables like `font-sizes`,\n`grid-gaps`, `font-families` and other things. Actually this\nscss files will generate zero line of css code.\n\nCommon Examples:\n\n - [_breakpoint.scss](src/1-settings/_breakpoint.scss)\n - [_color.scss](src/1-settings/_color.scss)\n - [_font.scss](src/1-settings/_font.scss)\n - [_grid.scss](src/1-settings/_grid.scss)\n\nMore Examples:\n\n - [_h.scss](src/1-settings/_h.scss)\n - [_icomoon.scss](src/1-settings/_icomoon.scss)\n - [_paragraph.scss](src/1-settings/_paragraph.scss)\n - [_small.scss](src/1-settings/_small.scss)\n - [_zindex.scss](src/1-settings/_zindex.scss)\n\n### ITCSS - `Tools`\n\nTools are function or mixins we use in our code. For example\nmixins to make media queries easier or how to set a font size\non the elements. so this function and mixins are just define\nto be reused in the other layers. Also this layer should output\n0 lines of code.\n\nCommon Examples:\n\n - Nothing listed\n\nMore Examples:\n\n - [_container-link.scss](src/2-tools/_container-link.scss)\n - [_map-math.scss](src/2-tools/_map-math.scss)\n - [_media.scss](src/2-tools/_media.scss)\n - [_paragraph-spacing.scss](src/2-tools/_paragraph-spacing.scss)\n\n### ITCSS - `Generic`\n\nGeneric is the first layer which will actually output any css\nit will, in this layer basic things like `box-sizing`, `reset`\nor `normalize` css are defined.\n\nCommon Examples:\n\n - _reset.scss or _normalize.scss\n - [_box-sizing.scss](src/3-generic/_box-sizing.scss)\n\nMore Examples:\n\n - [_focus.scss](src/3-generic/_focus.scss)\n - [_font.scss](src/3-generic/_font.scss)\n\n### ITCSS - `Elements`\n\nElements define the basic styling of any tag its important here\nthat no class selectors are used inside this layer.\n\nCommon Examples:\n\n - [_a.scss](src/4-elements/_a.scss)\n - [_body.scss](src/4-elements/_body.scss)\n - [_img.scss](src/4-elements/_img.scss)\n - [_li.scss](src/4-elements/_li.scss)\n - [_p.scss](src/4-elements/_p.scss)\n - [_table.scss](src/4-elements/_table.scss)\n\nMore Examples:\n\n - [_button.scss](src/4-elements/_button.scss)\n - [_figure.scss](src/4-elements/_figure.scss)\n - [_small.scss](src/4-elements/_small.scss)\n - [_input.scss](src/4-elements/_input.scss)\n\n### ITCSS - `Objects`\n\nThe difference between objects and components are sometimes\nhard to understand if you were new to CSS methodologies. If\nyou are familiar with [SMACSS](http://smacss.com/) you can\nsee them as layout components. So objects are used to define\nthe spaces between your other components. They work most with\nmargins, width, display and similar layout css attributes.\nThings like font-sizes, colors, backgrounds, should in my\nopinion be not part of any objects component.\n\nBeside the most common [media object](https://css-tricks.com/media-object-bunch-ways/)\nI can recommend [Mark Dalgleish](https://twitter.com/markdalgleish)\ntalk about [Rethinking Design Patterns](https://www.youtube.com/watch?v=jnV1u67_yVg)\nin the [Objects](#objects) section we will tak more about them.\n\nCommon Examples:\n\n - [_media.scss](src/5-objects/_media.scss)\n - [_grid.scss](src/5-objects/_grid.scss)\n - [_container.scss](src/5-objects/_container.scss)\n - [_stack.scss](src/5-objects/_stack.scss)\n - [_inline.scss](src/5-objects/_inline.scss)\n - _animations.scss\n\n### ITCSS - `Components`\n\nThe components is the layer where we mostly will write the\ncss in project. As in this layer we define how the navigation,\nfooter, header and other components will look like. Its very\nimportant that components itself do not define any spaces around\nthem. Have here a look at [Mark Dalgleish](https://twitter.com/markdalgleish)\nTalk about [Rethinking Design Practices](https://www.youtube.com/watch?v=xxbc3wAztl0).\n\nCommon Examples:\n\n - [_menu.scss](src/6-components/_menu.scss)\n - [_footer.scss](src/6-components/_footer.scss)\n - [_header.scss](src/6-components/_header.scss)\n - [_button.scss](src/6-components/_button.scss)\n - [_teaser.scss](src/6-components/_teaser.scss)\n\nMore Examples:\n\n - _pagination.scss\n - _slider.scss\n\n### ITCSS - `Utilities`\n\nThe utilities is the last layer of ITCSS it contains utility\nand helper classes. Most common used to hide elements or some\nutility classes\n\nCommon Examples:\n\n - [_none](src/7-utilities/_none.scss)\n - [_text](src/7-utilities/_text.scss)\n\nMore Examples:\n\n - _space.scss\n\n## Objects\n\nObject or layout components are one of the important things inside a project\nif false used the whole project could be a mess. Here I will list my most used\nobject or layout components which every project could profit from.\n\n### Object - `Container`\n\nThe container exist in mostly every common CSS Framework for \nexample [Bootstrap](https://getbootstrap.com/docs/5.0/layout/containers/).\nThe task of a container object is to center content and give space\nto it to the screen.  \nThis is mostly done to keep content readable because if the text\nis too long in one line it is not longer readable to the user. \n\n![Container Example](images/container.png)\n\n### Object - `Grid`\n\nGrid is also one of the most common object in CSS Framework.\nMostly today is worked with 12-column grid. Most designers\nshould keep here in mind that this 12-column grid is not only\navailable over the full width of the page. Also a 12 column\ngrid can be nested or is also available inside a container.\n\nIn my case I created my own grid which has no spaces at top\nand bottom and just inside gaps. Also the width of the grid\nitems are controlled over separated width classes as they are\nreusable on other none grid elements.\n\n![Grid Example](images/grid.png)\n\n### Object - `Media`\n\nThe media object was first published by [Nicole Sullivan](https://twitter.com/stubbornella)\non her [blog](http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/)\nit is a reusable pattern for an object which has fixed with\n(media) beside content (mostly text).\n\nThe container which has the media inside it will shrink the\nminimal size it has and the container with the content will\ngrow the max size it gets. This pattern is common used on \nsocial media platform where profile images has fixed width\nand the text content can grow the size of its parent\ncontainer.\n\nThe media object implementation can also be found on the\n[CSS-Tricks Blogpost here](https://css-tricks.com/media-object-bunch-ways/)\n\n![Media Example](images/media.png)\n\n![Media2 Example](images/media-2.png)\n\n### Object - `Stack`\n\nThe stack is an object which will make clear that all child\nelements of them have the same space in between. It can\nhas additional modifiers so the gap between the elements\ncan be configured over them. The stack does not have any\neffects on horizontal spacing to other elements just the\nvertical space between the child elements in it.\n\nThis is object is also part of [Mark Dalgleish](https://twitter.com/markdalgleish)\nLayout Components in his talk about [Rethinking Design Practices (Stack Component 13:00)](https://youtu.be/xxbc3wAztl0?t=780).\n\n![Stack Example](images/stack.png)\n\n### Object - `Inline`\n\nThe inline object make it easy to work with components which\nhas a dynamic width. The inline object just make sure that all\ncomponents which are in there have the same space between them\nvertical and horizontal. Like the other object and components\nit will not have any space out of it.\n\nThis is object is also part of [Mark Dalgleish](https://twitter.com/markdalgleish)\nLayout Components in his talk about [Rethinking Design Practices (Inline Component 13:50)](https://youtu.be/xxbc3wAztl0?t=830).\n\n![Inline Example](images/inline.png)\n\n## BEM\n\nBeside the structuring I use the widely spreaded [BEM](http://getbem.com/)\nsyntax to write my component. In most cases I try to avoid the\nModifiers as I think its better to have different block elements\nthen uncompatible modifiers. I common mistake I see here is for\nexample having one teaser BEM css with a lot of modifiers\ninstead of having different BEM teasers like `teaser-small`, `teaser-big`.\n\n### BEM ITCSS Prefixes\n\nIf you look at example repository from [Harry Roberts](https://csswizardry.com/)\non [Github](https://github.com/inuitcss/inuitcss). You see is also using\nthe BEM syntax to create to write its components. But there is also a small\nprefix in front of every components, object, utility class.\n\n - `o-` for `objects` e.g.: `o-grid`\n - `c-` for `components` e.g.: `c-button`\n - `u-` for `utilities` e.g.: `u-none`\n\nThink this makes also reviews of the code easier. So you can easier find\nerrors that object define design instead of just layout or that components\naccidentally adding spacing around them instead of using a object / layout\ncomponent for it. Linters could also make sure that 2 component classes\nare not used on the same element to avoid strange side effects.\n\nSee here also the Blog Post [ITCSS with namespaces](http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)\nfrom [Harry Roberts](https://csswizardry.com/).\n\n## Conclusion\n\nThe conclusion of my experience yet there a lot of principles and great\npeople out there in the web community which did share us great reusable ways\nto build our CSS, so we should use them and try to improve them for our way\nto write CSS. \n\nWhat I have to say to the end of this article, I hope I could give you a\ngreat overview about how I write CSS and maybe you could find here some\ninspiration, every feedback is welcome.\n\nMaybe you will not use ITCSS in the future I still recommend you to use\nsome widely share CSS Methodology (e.g.: SMACSS, OOCSS, Atomic Design, ...)\nor use just one as fundamental base and document your changes for it in\npublic repository. This will help you to get other programmers easier\ninto your codebase and help you to develop your websites faster.\n\nThank you for reading this!\n\nMore articles on Github from me can be found [here](https://github.com/topics/alexander-schranz-article).\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexander-schranz%2Fitcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Falexander-schranz%2Fitcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Falexander-schranz%2Fitcss/lists"}