{"id":4149,"date":"2014-08-13T09:00:39","date_gmt":"2014-08-13T12:00:39","guid":{"rendered":"http:\/\/blog.plataformatec.com.br\/?p=4149"},"modified":"2014-08-12T16:34:39","modified_gmt":"2014-08-12T19:34:39","slug":"css-at-plataformatec","status":"publish","type":"post","link":"http:\/\/blog.plataformatec.com.br\/2014\/08\/css-at-plataformatec\/","title":{"rendered":"CSS at Plataformatec"},"content":{"rendered":"<p>Last month some amazing developers gave a sneak peek on how they write CSS in their companies &#8211; Mark Otto has written about <a href=\"http:\/\/markdotto.com\/2014\/07\/23\/githubs-css\">CSS at GitHub<\/a>, followed by Ian Feather&#8217;s post about <a href=\"http:\/\/ianfeather.co.uk\/css-at-lonely-planet\/\">Lonely Planet&#8217;s CSS<\/a> and Chris Coyier write up about <a href=\"http:\/\/codepen.io\/chriscoyier\/blog\/codepens-css\">CodePen&#8217;s code<\/a> &#8211; so I thought about sharing a bit of how we have been doing CSS in our projects here at Plataformatec over the last years.<\/p>\n<p>After working on different projects with different styles of CSS, we wrote some <a href=\"http:\/\/guidelines.plataformatec.com.br\/css.html\">Guidelines<\/a> of what kind of code we would like to work with. These guidelines and some other practices have proven to be successful so far, and I want to tell you a bit about how we are doing this here.<\/p>\n<h3>Quick Facts<\/h3>\n<ul>\n<li>We use SCSS.<\/li>\n<li>We usually just have <a href=\"https:\/\/github.com\/necolas\/normalize.css\/\">Normalize.css<\/a> (and sometimes <a href=\"http:\/\/getbootstrap.com\">Bootstrap<\/a>) as third party dependencies.<\/li>\n<li>Every developer in our team can jump through the codebase and work on our front end code.<\/li>\n<\/ul>\n<h3>Preprocessors and the Pipeline<\/h3>\n<p>We have always used Sass (with the SCSS syntax), using most of the Sass features wherever seemed fit and without making the code too complex to grasp so developers outside the project &#8211; or without a long experience with preprocessors &#8211; could get things done right after jumping in the code.<\/p>\n<p>We do our best to use the most of the <a href=\"http:\/\/guides.rubyonrails.org\/asset_pipeline.html\">Rails Asset Pipeline<\/a>. I know that it isn&#8217;t the most beloved Rails feature out there, but we are pretty happy with it. The Sprockets + Rails integration in Rails 4 is way better than it was before (you can read a bit about what was done on <a href=\"http:\/\/yetimedia.tumblr.com\/post\/33320732456\/moving-forward-with-the-rails-asset-pipeline\">this post<\/a>), thanks to the work of <a href=\"https:\/\/github.com\/guilleiguaran\">Guillermo<\/a>, <a href=\"https:\/\/github.com\/rafaelfranca\">Rafael<\/a> and <a href=\"https:\/\/github.com\/schneems\">Richard<\/a> (the Sprocket heroes) and everybody else who contributed to <a href=\"https:\/\/github.com\/rails\/sprockets-rails\/graphs\/contributors\">sprockets-rails<\/a>, and things will only get better on future releases. If you had a hard time with a Rails 3 app, I recommend that you try it out the latest releases and see what have improved.<\/p>\n<h3>Architecture<\/h3>\n<p>We don&#8217;t have strict guidelines about how we should organize and architect our CSS code, but we have some general rules and conventions. We organize most of our code into isolated partial stylesheets under something like <code>modules<\/code> or <code>components<\/code>. And we also break functions, mixins and generic placeholders into specific files and <code>@import<\/code> everything on the application <code>application.css.scss<\/code> file.<\/p>\n<p>We do our best to keep our selectors small and using only classes, somewhat based on <a href=\"http:\/\/eng.wealthfront.com\/2013\/08\/functional-css-fcss.html\">Wealthfront post on Functional CSS<\/a> and OOCSS-ish. With this setup we can avoid complex nested blocks and keep things quite readable for everybody.<\/p>\n<h3>Linting<\/h3>\n<p>We don&#8217;t have a specific guideline on linting, but I have been experimenting with <a href=\"https:\/\/github.com\/causes\/scss-lint\">SCSS Lint<\/a> on the project that I\u2019m current working on, and I want to evolve this into a default configuration for future projects.<\/p>\n<h3>Frameworks<\/h3>\n<p>We have some different setup across our projects, but we usually just have <a href=\"https:\/\/github.com\/necolas\/normalize.css\/\">Normalize.css<\/a> as our &#8220;reset&#8221; stylesheet and everything else is custom made &#8211; buttons, grids, typography rules, etc. And of all the existing CSS frameworks out there, we had some encounters with <a href=\"http:\/\/getbootstrap.com\">Bootstrap<\/a> and <a href=\"http:\/\/foundation.zurb.com\">Foundation<\/a> once.<\/p>\n<h3>Documentation<\/h3>\n<p>We love documentation &#8211; not obvious code comments, but real documentation that makes easier to understand how to use a specific piece of code.<\/p>\n<p>We started writing docs for our CSS to make more sense out of a SCSS partial, so through a single file we can understand how the application can use those styles. We have adopted some loose form of the <a href=\"http:\/\/warpspire.com\/kss\/\">KSS<\/a> syntax, because we currently don&#8217;t care about generating pretty styleguides with live examples of the styles in use. But the KSS format is human-readable enough and does the job of explaining the purpose of a set of classes to someone.<\/p>\n<h3>Sprites<\/h3>\n<p>Last year I created a gem called <a href=\"http:\/\/github.com\/lucasmazza\/spriteful\">Spriteful<\/a> to help us manage the image sprites in some projects without having to bring <a href=\"http:\/\/compass-style.org\">Compass<\/a> and <a href=\"https:\/\/github.com\/Compass\/compass-rails\">compass-rails<\/a> as dependencies to our pipeline. Spriteful has proven useful to me and my coworkers, and now we can generate sprites and SCSS partials out of icons and SVG images with just a single command.<\/p>\n<p>Some close friends from outside the company have used it on their projects and it&#8217;s awesome that someone else has found our little tool handy for this task.<\/p>\n<h3>Who&#8217;s in charge?<\/h3>\n<p>One important aspect of how we work is that every developer in the team is capable to work with the front end code of the application and build new things or fix existing bugs, not just turn some static markup into ERB blocks. This provides a higher sense of collective ownership of the code, instead of enlisting one or two programmers who are in charge of half of the application while everybody else works elsewhere without caring about that layer.<\/p>\n<p style=\"text-align: center;\">\n<p><span id=\"hs-cta-wrapper-2aeae558-5b72-4df3-bf32-e1119f34d85e\" class=\"hs-cta-wrapper\"><span id=\"hs-cta-2aeae558-5b72-4df3-bf32-e1119f34d85e\" class=\"hs-cta-node hs-cta-2aeae558-5b72-4df3-bf32-e1119f34d85e\"> <a href=\"http:\/\/cta-redirect.hubspot.com\/cta\/redirect\/378213\/2aeae558-5b72-4df3-bf32-e1119f34d85e\"><img decoding=\"async\" id=\"hs-cta-img-2aeae558-5b72-4df3-bf32-e1119f34d85e\" class=\"hs-cta-img aligncenter\" style=\"border-width: 0px;\" src=\"https:\/\/no-cache.hubspot.com\/cta\/default\/378213\/2aeae558-5b72-4df3-bf32-e1119f34d85e.png\" alt=\"\" \/><\/a><\/span><\/span><br \/>\n<!-- end HubSpot Call-to-Action Code --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Last month some amazing developers gave a sneak peek on how they write CSS in their companies &#8211; Mark Otto has written about CSS at GitHub, followed by Ian Feather&#8217;s post about Lonely Planet&#8217;s CSS and Chris Coyier write up about CodePen&#8217;s code &#8211; so I thought about sharing a bit of how we have &#8230; <a class=\"read-more-link\" href=\"http:\/\/blog.plataformatec.com.br\/2014\/08\/css-at-plataformatec\/\">\u00bb<\/a><\/p>\n","protected":false},"author":17,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"ngg_post_thumbnail":0,"footnotes":""},"categories":[1],"tags":[220,189],"aioseo_notices":[],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/4149"}],"collection":[{"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/users\/17"}],"replies":[{"embeddable":true,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/comments?post=4149"}],"version-history":[{"count":4,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/4149\/revisions"}],"predecessor-version":[{"id":4152,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/posts\/4149\/revisions\/4152"}],"wp:attachment":[{"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/media?parent=4149"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/categories?post=4149"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/blog.plataformatec.com.br\/wp-json\/wp\/v2\/tags?post=4149"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}