ROOCSS is an ideology created by Richardson Dackam that make it easier to build stylesheet for medium and large ruby on rails websites.
Forget the BEST PRACTISES you knew and apply the ROOCSS (pronounced "RO CSS") ideology:
- Separation of structure from skin
- Separation of containers and content
- Grid set the width and Content set the height
- CSS with the suffix "_debug" define the look
- (Almost) Only use classes
- Use classes everywhere else, Only use IDs in Layout.css
- Reuse your classes
Assets
- Images/
- Javascripts/
- Stylesheets/
-- Fonts/
-- Library.css
-- Layout.css
-- Grid.css
-- Grid_debug.css
-- Content.css
-- Content_debug.css
(HTML in the root)
Following this file structure will keep your file organized and make it easier to switch from one ROOCSS app to another and still understand whats going on.
Library.css
Put any imported setup here (CSS Reset + Font Family + H1, H2, H3, H4, H5, H6, p)
Layout.css
Used to setup the core layout of the skin that will be used in the application.html.erb file (Body, Header, Navbar, Container & Footer). This is the only place where you can exceptionally use IDs. Grid.css
The Grid system should be used to create classes that define the width of container, the space between container or content elements and the position of container elements.
Grid_debug.css
To set up the color of your containers.
Content.css
Any Style that defines the form of content elements
Content_debug.css
Any Style that defines the look of content elements
I will soon add some template and example so that you can play with the template in Firebug to learn the basics of ROOCSS.
I will soon release a gem to implement ROOCSS into your rails app.
- Smaller file size: Less duplication should result in smaller file sizes
- Maintainable stylesheets: Modules of css can be added anywhere and it's easier to improve one block of code instead of many.
- Ease of maintenance: Code is located in one block instead of many
- Stay DRY: Do not repeat yourself
- Predictable: Once you get familiar with OOCSS it's easy to guess what classes to use.
- Flexible: It's very personal and yet can be quickly used by other people working on your site.
- Where ROOCSS come from?
ROOCSS was inspired by OOCSS created by Nicole Sullivan. If you have any question about the OOCSS part of ROOCSS just visit https://github.com/stubbornella/oocss/wiki/faq
- How is ROOCSS different from OOCSS?
ROOCSS was designed to fit my need as a Ruby on Rails Developer: It the OOCSS ideology applied for Rails. ROOCSS has a different file structure than OOCSS.
- Can I remove unused styles?
Totally. If you are done building your website and you don't need some element feel free to remove them.
- Why you shouldn't use IDs?
Using an ID in a selector is similar to add !important; it is a trump card that will override all other types of selector. You probably don’t always want this. It also encourages you to create new id that use the same css over and over again while classes help to redeuce the amount of code created.By using classes you set yourself to create css style that are reusable.
- Why you should only use IDs in Layout.CSS?
IDs should only be used if you do not plan to reuse it for another selector. The Layout.css define how your website NAVBAR, HEADER and FOOTER are going to look. It will be the same across all your pages and will be only used once in the layout/application.html.erb file. Note that using semantically better markup (
, ) will help search engine crawlers construct a better image of your website.
Richardson Dackam is a Senior Ruby on Rails Developer located in Toronto, Ontario, Canada.
You can contact the author at:
- @richardsondx on Twitter and linkedin.com/in/richardsondx on LinkedIN
- Thanks to Nicole Sullivan for introducing OOCSS. Visit Nicole Sullivan's BLOG on OOCSS at http://www.stubbornella.org/
Having trouble with ROOCSS? create an issue on github and me or the community will help you sort it out.
If you'd like to contribute to this wiki and submit some detailed explanation feel free to send me a pull request. ROOCSS is an open source project and I would love to improve it. I am always open for suggestion: Fork & send me pull requests if you would like to contribute.
For anything else just email me at [email protected].