CSS - chained classes

CSS
Chained classes

Julien BRAURE – julien@jazar.co.uk

CSS – Chained classes

•What is CSS ?

•Quick overview

•Chained classes

•Examples

•Conclusion

•Questions and maybe answers


What is CSS ?

•CSS : Cascading Style Sheet

•Separate Content and Presentation

HTML CSS
<html> + body { =
<body> color: #fff;
}

•Save server load
Page1 ?
HTML
Page CSS
1

Page 2 ?
HTML
Page
2

•Reduce maintenance time

Change in the design ? only update the CSS file


Quick overview

HTML CSS

<markup class=“class1” id=“this-one” /> markup.class1#this-one {
/* here goes the declarations */
color: #f00;
border: 1px solid #000;
}

classes are prefix with a dot (.)
id is prefix with a sharp (#)


Chained classes (HTML side)

•In HTML the class attribute, may have multiple classes, space separated
<p class=“class1 class2 ... classN”>

HTML CSS

<p class=“class1”> p.class1 {
Lorem ipsum dolor sit amet. color: red;
</p> }

Lorem ipsum dolor sit amet. font-weight: bold;
</p> }

<p class=“class1 class2”>
Lorem ipsum dolor sit amet.
</p>

CSS declarations are merging ...
This paragraph is red AND bold


Chained classes (CSS side)


HTML CSS

</p> }

</p> }

<p class=“class1 class2”> p.class1.class2 {
Lorem ipsum dolor sit amet. text-decoration: underline;
</p> }

CSS declarations are merging ... This declarations only applies to markup
This paragraph is red, bold AND underlined with class1 AND class2

Chained classes :
•HTML : space separated
•CSS : concatenated

Chained classes (CSS side)


HTML CSS

<p class=“class1”> p.class1 { overwrites
</p> }

</p> }

<p class=“class1 class2”> p.class1.class2 {
Lorem ipsum dolor sit amet. text-decoration: underline;
</p> color: green;
}


Chained classes – Example 1

Messages: success, error, info


Chained classes - Example

HTML CSS

p.message {
border: 2px solid;
Common padding: 16px 8px 16px 48px;
declarations background-repeat: no-repeat;
background-position: 8px center;
}

p.message.success {
<p class=“message success”> border-color: green;
Great ! color: green;
It has been done. background-image: url(img/message.success.gif);
</p> }

p.message.error {
<p class=“message error”> border-color: red;
Bad luck ! color: red;
Some error happens. background-image: url(img/message.error.gif);
</p> }

p.message.info {
<p class=“message info”> border-color: blue;
Some important information. color: blue;
</p> background-image: url(img/message.info.gif);
}


Chained classes – Example 2 - Site wide organisation

•Insurance website
•Static contents
•Faq’s
•Legal informations
•Some other contents
•Dynamic sections
•Cars insurance
•Houses insurance

•Design
•Static:
•Grey
•Dynamic:
•Car section: red
•House section: blue



•Basic layout:

<div id=“header”>
</div>

<div class=“page”>
<h1>title of the page</h1>

<p>some content</p>
<p>some content</p>
<p>some content</p>
</div>

<div id=“footer”>
</div>



•Sample sitemap
.page

.dynamic .static
.faq
.car
#q1 #q2
#step1 #step2
...

.legal

.house #tos

#step1 #step2

#contact



•Sample sitemap
.page

.dynamic .static

.faq
.car
<div class=“page dynamic house” id=“step2”>
#q1 #q2
#step1
</div>#step2
...

.legal

.house #tos

#step1 #step2

#contact



•Sample sitemap
.page

.dynamic .static

.faq
.car
#q1 #q2
#step1 #step2
...

.legal

.house #tos

#step1 #step2

#contact
<div class=“page static legal” id=“tos”>
</div>



CSS

.page h1 {
Common font-size: 16px;
declarations }

.page.static h1 {
background-color: grey;
}

.page.dynamic.car h1 {
background-color: red;
}

.page.dynamic.house h1 {
background-color: blue;
}



Customized messages on car pages ?

.page.dynamic.car .message.success {
background-image: url(img/dynamic/car/message.success.gif);
}


Conclusion

•Real separation between content and presentation

•Ability to deploy rapidly alternative design, for Christmas for example

To keep in mind

•In my HTML: what I want to say
•In my CSS: how I want to render it

•Avoid presentation related classes in HTML
Eg: bold, small, rounded, ...


Questions ?

Any questions ?


CSS - chained classes

Recommended

Recommended

More Related Content

Similar to CSS - chained classes

Similar to CSS - chained classes (20)

Recently uploaded

Recently uploaded (20)

CSS - chained classes