Organising CSS with your components

Posted: 20 August 2009 in Components, CSS, Pages, SitePublisher, Sites

CSS styles can be specified as inline style for the document, in the head using … tags. They can also be attached to the document by using the tag. Lastly, styles can be applied to tags directly using the style attribute for the HTML element.

When developing components, it is often very tempting to place styling inline, using the appearance XSL input area as style attributes to elements. While this is fine for the development phase, styles should be extracted to a stylesheet document baring the same name as the component.

From there, there are two solutions. Either the users add the stylesheet individually to each page, or the stylesheet is added to the default.site directly and by extension to all the pages. Although very legal, in practice, there is something that people don’t like to see 30 CSS files attached to a single HTML document. To paliate to this “perception” problem, a nice solution is to create 1 css document that uses the @import functionality of the CSS, thus giving the appearance that only 1 CSS document is called by the page.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s