Sesat > Docs + Support > Development using the SFC > Developing using CSS

Developing using CSS

General information

Css files are mainly created dynamically from the <tab> element in the views.xml file. The name of the css file is taken from the id attribute, and is imported in the code in head.vm. This means that every vertical/tab can have it's own style avoiding too much unnecessary style. It's also possible to add a css file manually, besides adding it directly in the head.vm,  with inserting a css attribute in the <tab> element (without the css file extension), and to omit the stylesheet to be used you can add attribute called "display-css" and set this to "false". The principle that every tab inherits from the level above also applies for css. Another thing is that a style can be overidden by the more spesific a stylesheet.
 

Practical use

I will take the person-infopage as a quick example for how it works.  Here it's three stylesheets, default, whitepages and whitepages-info. The default stylesheet is included in every tab and should contain styles that are in common, i.e link color, font-size, footer style and so on. (An exception for this is the individual frontpages for the tabs where the style is included directly in the vm file). Starting at the bottom level in the views.xml file we find the tab "whitepages-info". Here's the style for the role-tab which just exist for the person infopage and not the result page. As we see, this inherits data from "whitepages", where i.e the common "person things" like color and searchbar are. (this file will also contain result spesific things but you can't please all...). This tab inherits from "default-template", but here you will find the display-css attribute set to false so this file isn't included. At last this tab inherits from "default" and this file is added.

(At the time writing, the ps.css also exist, but I plan to remove this...) 

Project independant css

There's a challenge on how we got things structured and with the inheritance which follows, and how we manage the css files (and templates accordingly). The thing we want to avoid is ofcourse making a stylechange one place, making an impact in another project that's not meant to be. We've come to the conclusion that projects in different countries should be independant of each other so they don't share css at all. But sitesearchprojects for a given country inherits stylesheets from the main project. Further there is way more similarities between the sitesearches and that's the reason why we have the genericsitesearch project which serves as a common central for the sitesearches. So sitesearches have a sitesearch.css that's acts like the default.css mentioned earlier. Common styles for both the main project and sitesearches, like i.e style for advertisement, should be in default.css.

This is how we try to keep things for now, but there may of course be other and better solutions in the future.
 

Guidelines

  • Try to avoid inline css
  • Naming css elements should be: word1Word2 (not word1:word2)
  • Try minimizing style classes/id where it's practical i.e:  <div id='id1'><span class='class1'>text text</span></div>  Here 'class1', and really the whole <span> element is excessive. Use ' #id1 span {} ' in stylesheet instead.

...and remember to remove style when codechanges make style redundant.

 © 2007-2009 Schibsted ASA
Contact us