{"action":"created","issue":{"url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/56","repository_url":"https://api.github.com/repos/carbon-design-system/carbon-components","labels_url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/56/labels{/name}","comments_url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/56/comments","events_url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/56/events","html_url":"https://github.com/carbon-design-system/carbon-components/issues/56","id":225699755,"number":56,"title":"Why is the css/scss reliant on classes?","user":{"login":"ajdaniel","id":867941,"avatar_url":"https://avatars2.githubusercontent.com/u/867941?v=3","gravatar_id":"","url":"https://api.github.com/users/ajdaniel","html_url":"https://github.com/ajdaniel","followers_url":"https://api.github.com/users/ajdaniel/followers","following_url":"https://api.github.com/users/ajdaniel/following{/other_user}","gists_url":"https://api.github.com/users/ajdaniel/gists{/gist_id}","starred_url":"https://api.github.com/users/ajdaniel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajdaniel/subscriptions","organizations_url":"https://api.github.com/users/ajdaniel/orgs","repos_url":"https://api.github.com/users/ajdaniel/repos","events_url":"https://api.github.com/users/ajdaniel/events{/privacy}","received_events_url":"https://api.github.com/users/ajdaniel/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2017-05-02T13:46:01Z","updated_at":"2017-05-02T13:59:19Z","closed_at":null,"body":"## Overview\r\nI am using carbon-components for a project. I find the CSS really over-verbose and unweildly. Let's look at this example of a transactional modal:\r\n\r\n```<div data-modal id=\"modal\" class=\"bx--modal\" tabindex=\"-1\">\r\n  <div class=\"bx--modal-container\">\r\n    <div class=\"bx--modal-header\">\r\n      <h4 class=\"bx--modal-header__label\">Label (Optional)</h4>\r\n      <h2 class=\"bx--modal-header__heading\">Modal Title</h2>\r\n      <button class=\"bx--modal-close\" type=\"button\" data-modal-close>\r\n        <svg class=\"bx--modal-close__icon\">\r\n          <use xlink:href=\"/carbon-icons/bluemix-icons.svg#icon--close\"></use>\r\n        </svg>\r\n      </button>\r\n    </div>\r\n\r\n    <div class=\"bx--modal-content\">\r\n      <p>Modal text description</p>\r\n    </div>\r\n\r\n    <div class=\"bx--modal-footer\">\r\n      <button class=\"bx--btn bx--btn--secondary\" type=\"button\" data-modal-close>Cancel</button>\r\n      <button class=\"bx--btn bx--btn--primary\" type=\"button\" data-modal-primary-focus>Save</button>\r\n    </div>\r\n  </div>\r\n</div>\r\n```\r\n\r\nThere is a class for almost every element, when an element can easily be inferred by the structure. For example, instead of have three nested classes: `bx--modal` > `bx--modal--container` > `bx--modal-header`, there could be the one class on the top level element, and use `.bx--modal > div` to select the modal-container and a `<header>` element selected by `.bx--modal header`. *An overly verbose css class system is very unnecessary and clutters the HTML making it difficult to read.*\r\n\r\nThe button is another example of over-verbose and redundant information:\r\n\r\n```<button class=\"bx--btn bx--btn--primary\" type=\"button\" disabled>Primary button</button>```\r\n\r\nWe know it is a button element, so why do we need a `bx-btn` class? Perhaps if we want to make our button _bluemix-ey_ just make a `bx` class for the button. And look, we have another class with _btn_ in it... `bx--btn--primary`! This makes it very difficult for a developer to remember, and to see clearly what is happening in a big html template. The above can be easily achievable like so:\r\n\r\n```<button class=\"bx primary\" type=\"button\" disabled>Primary button</button>```\r\n\r\nusing these CSS selectors: `button.bx`, `button.bx.primary`.\r\n\r\nI know all of this style is throughout the whole application. But I think there is a lot of mileage on utilising CSS more effectively by removing the amount of classes *needed* to implement the components, and rely more on structure and selectors that can work on multiple classes.\r\n\r\n```gherkin\r\nFeature: cleaner HTML needed\r\n  As a developer\r\n  I want fewer CSS classes to use in HTML\r\n  So that I can developer faster, and have more maintainable code\r\n```\r\n"},"comment":{"url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/comments/298643807","html_url":"https://github.com/carbon-design-system/carbon-components/issues/56#issuecomment-298643807","issue_url":"https://api.github.com/repos/carbon-design-system/carbon-components/issues/56","id":298643807,"user":{"login":"ajdaniel","id":867941,"avatar_url":"https://avatars2.githubusercontent.com/u/867941?v=3","gravatar_id":"","url":"https://api.github.com/users/ajdaniel","html_url":"https://github.com/ajdaniel","followers_url":"https://api.github.com/users/ajdaniel/followers","following_url":"https://api.github.com/users/ajdaniel/following{/other_user}","gists_url":"https://api.github.com/users/ajdaniel/gists{/gist_id}","starred_url":"https://api.github.com/users/ajdaniel/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ajdaniel/subscriptions","organizations_url":"https://api.github.com/users/ajdaniel/orgs","repos_url":"https://api.github.com/users/ajdaniel/repos","events_url":"https://api.github.com/users/ajdaniel/events{/privacy}","received_events_url":"https://api.github.com/users/ajdaniel/received_events","type":"User","site_admin":false},"created_at":"2017-05-02T13:59:19Z","updated_at":"2017-05-02T13:59:19Z","body":"I think a big change like this would need a major version change too, it would break projects already using this system."}}
{"actor":{"display_login":"ajdaniel"}}