{"action":"created","issue":{"url":"https://api.github.com/repos/CartoDB/cartodb/issues/4905","labels_url":"https://api.github.com/repos/CartoDB/cartodb/issues/4905/labels{/name}","comments_url":"https://api.github.com/repos/CartoDB/cartodb/issues/4905/comments","events_url":"https://api.github.com/repos/CartoDB/cartodb/issues/4905/events","html_url":"https://github.com/CartoDB/cartodb/issues/4905","id":99404851,"number":4905,"title":"build issues with stylesheets","user":{"login":"matallo","id":36676,"avatar_url":"https://avatars.githubusercontent.com/u/36676?v=3","gravatar_id":"","url":"https://api.github.com/users/matallo","html_url":"https://github.com/matallo","followers_url":"https://api.github.com/users/matallo/followers","following_url":"https://api.github.com/users/matallo/following{/other_user}","gists_url":"https://api.github.com/users/matallo/gists{/gist_id}","starred_url":"https://api.github.com/users/matallo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matallo/subscriptions","organizations_url":"https://api.github.com/users/matallo/orgs","repos_url":"https://api.github.com/users/matallo/repos","events_url":"https://api.github.com/users/matallo/events{/privacy}","received_events_url":"https://api.github.com/users/matallo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":1,"created_at":"2015-08-06T10:26:44Z","updated_at":"2015-08-06T11:37:58Z","closed_at":null,"body":"when started data-library I found it was an opportunity to be more strict on the advances we've made to stick to a css styleguide, pityfully it involved more work than I originally scoped so I'm created this separate issue to keep track of those issues.\r\n\r\n1. the first thing I'd set to discuss is the build task for the css. It differs from the common pattern of building css frameworks from modules (see examples [1] [2] [3]). We are currently not taking advantage of the @import, but creating the css for every scss module then concat.\r\n\r\nso, for every css we are doing the import of the non-rendering css (sizes, colors, ...) instead of having an entry scss, with the non-rendering css on top and the rest of the modules below\r\n\r\nlet's see this with an example, i.e. dashboard:\r\n\r\n**current:**\r\n\r\nstylesheets/dashboard/*.css.scss => stylesheets/dashboard/*.css\r\nstylesheets/dashboard/datasets/*.css.scss => stylesheets/dashboard/datasets/*.css\r\nstylesheets/dashboard/maps/*.css.scss => stylesheets/dashboard/maps/*.css\r\n\r\nwith\r\n\r\n```\r\n@import \"../variables/mixins\";\r\n@import \"../variables/colors\";\r\n@import \"../variables/sizes\";\r\n```\r\n\r\nat the top of every file, then concat to:\r\n\r\nstylesheets/dashboard.css\r\n\r\n**proposed:**\r\n\r\nstylesheets/dashboard.css.scss with:\r\n\r\n```\r\n// Non-rendering scss\r\n@import \"../_variables\";\r\n@import \"../_mixins\";\r\n\r\n// Components\r\n@import \"../_components\";\r\n\r\n// Layout\r\n@import \"_base\";\r\n```\r\n\r\n**explicitely** importing every file, instead of using gobbling `**` and grouping them if necessary (i.e. components)\r\n\r\nfinally, all non entry scss should be prefixed by underscore `_`\r\n\r\n2. This point is quite more harder but we should move away from Compass, together with code B.S. (before styleguide) it's penalizing a lot on build times. Furthermore, instead of relying on Compass mixins (preprocess time) a good alternative would be Autoprefixer (postprocess time) to keep css as lean as possible.\r\n\r\n3. Don't mix nest and concat for classes in the CSS, we should stick to one style (I did nest before, but +1 to concat) i.e:\r\n\r\n```\r\n.button {\r\n  &:hover { }\r\n}\r\n```\r\n\r\n```\r\n.button {}\r\n.button:hover {}\r\n```\r\n\r\nI'll expand the issue as I find more\r\n\r\n[1] http://thesassway.com/beginner/how-to-structure-a-sass-project\r\n[2] http://pivotallabs.com/structure-your-sass-files-with-import/\r\n[3] https://github.com/ubuntudesign/vanilla-framework"},"comment":{"url":"https://api.github.com/repos/CartoDB/cartodb/issues/comments/128336317","html_url":"https://github.com/CartoDB/cartodb/issues/4905#issuecomment-128336317","issue_url":"https://api.github.com/repos/CartoDB/cartodb/issues/4905","id":128336317,"user":{"login":"matallo","id":36676,"avatar_url":"https://avatars.githubusercontent.com/u/36676?v=3","gravatar_id":"","url":"https://api.github.com/users/matallo","html_url":"https://github.com/matallo","followers_url":"https://api.github.com/users/matallo/followers","following_url":"https://api.github.com/users/matallo/following{/other_user}","gists_url":"https://api.github.com/users/matallo/gists{/gist_id}","starred_url":"https://api.github.com/users/matallo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/matallo/subscriptions","organizations_url":"https://api.github.com/users/matallo/orgs","repos_url":"https://api.github.com/users/matallo/repos","events_url":"https://api.github.com/users/matallo/events{/privacy}","received_events_url":"https://api.github.com/users/matallo/received_events","type":"User","site_admin":false},"created_at":"2015-08-06T11:37:58Z","updated_at":"2015-08-06T11:37:58Z","body":"also, the long-running issue with compiled css being checked in\r\n\r\n```\r\nvendor/assets/javascripts/cartodb.uncompressed.js\r\nvendor/assets/stylesheets/cartodb.css\r\n```\r\n"}}