Structuring CSS styles for teams

1. Team Styles
How to develop Cascading Style Sheets for
use in a team

2. Nathan Sampimon
@nathan_scott

3. Challenges
• Be progressive, without leaving anyone
behind
• Tackle multiple levels of experience
• Keep it simple
• Allow for isolation

4. Why a team?
• Big apps = multiple developers
• You should be building ready for a
handover
• Create a solid foundation and build off it

5. What do we want to
deliver?

6. As little as possible

7. • Less files
• Minimum amount of http requests
• Styles to target less sophisticated browsers
• Styles to target different media types’
• Simplicity

8. What do we want to
work with?

9. • More files
• Loads of stylesheets
• Broken up into sections
• Easy to navigate, isolate, extrapolate
• Sheets to target different browsers
• Sheets to target different media

10. Front-end Developers

11. • Like working their own way
• Often opinionated
• Not necessarily technical
• May require guidance

12. How to we address
this?

13. Most important: Talk to them

14. • Write docs
• Outline rules
• Use comments
• Provide structure

15. Docs

16. • Overview of technologies used
• Approach to issues like
• Browser targeting
• CSS3
• @media supported
• Outline creative brief
• Include original designs

17. Rules

18. Outline any general coding rules

19. • Don’t change base styles

20. (try rewriting the style with more specific
selectors)

21. // John
.button {
background: black;
color: white;
}
// Peter
html body .button {
background: grey;
color: creme;
}

22. • Alphabetise properties

23. (Although I prefer to have styles structured
as follows)
h1#logo {
Layout display: block;
(by importance) position: absolute;
margin: 15px 0 10px;
padding: 7px 4px;
Aesthetics
background: black;
(by impact)
font: bold 16px/21px Helvetica, Arial,
color: pink;
}

24. Comment anything
ambiguous or unclear

25. Structure <<

26. • Rails is easy to navigate, because of
structure
• Create a solid structure in your app
• Why reinvent the wheel?

27. Controllers
announcement
s
application
documents
events
parts
user_sessions

28. Controllers Views
announcement announcement
s s
application documents
documents events
events layouts
parts parts
user_sessions user_sessions

29. Controllers Views Stylesheets
announcement announcement application
s s announcement
application documents s
documents events documents
events layouts events
parts parts layouts
user_sessions user_sessions parts
user_sessions

30. Controllers Views Stylesheets
announcement announcement application
s s announcement
application documents s
documents events documents
events layouts events
parts parts layouts
user_sessions user_sessions parts
user_sessions

31. All partials feed into 1 stylesheet
Only 1 stylesheet gets sent to browser

32. stylesheets/
styles.css
partials/
_application.css
_announcements.css
_documents.css
...

33. Target media

34. @media
<LINK REL="stylesheet" TYPE="text/css"
MEDIA="print, handheld" HREF="foo.css">
@media screen {
body {
background: white;
}
}

35. @media
• all • handheld • screen
• braille • print • speech
• embossed • projection • tty

36. @media
@media (max-width: 600px)
{
...
}
@media (max-width: 400px) {
...
}
@media (min-width: 1300px) {

37. Naming Conventions
application.css
application.print.css
announcements.css
documents.css
events.css
layouts.css
layout.print.css
parts.css
user_sessions

38. Extrapolate to suit
application/reset.css
application/fonts.css
application.css
application.print.css
announcements.css
documents.css
events.css
layouts.css
layout.print.css
parts.css
user_sessions

39. Target browsers

40. 1 sheet for each IE version
1 sheet for every other browser

41. = stylesheet_link_tag 'screen', :media => 'screen'
= stylesheet_link_tag 'print', :media => 'print'
/[if lte IE9]
= stylesheet_link_tag 'ie9', :media => 'screen'
/[if lte IE8]
= stylesheet_link_tag 'ie8', :media => 'screen'
/[if lte IE7]
= stylesheet_link_tag 'ie7', :media => 'screen'
/[if lte IE6]
= stylesheet_link_tag 'ie6', :media => 'screen'

42. IE Sheets are generally quite small, no
need for partials

43. Use less hacks
and more tact

44. Use this: # application.css
li {
margin: 5px;
}
# ie.css
li {
margin: 0;
}
Over this: # application.css
li {
margin: 5px; !important
margin: 0;
}

45. Quick side note

46. CSS Resets
To take browser subjectivity out of the equation

47. Front end developers tend to be
particular
Stick to the big ones

48. • Yahoo! YUI Reset
• Eric Meyer

49. • Use as a base
• Customise to suit project (cascaded)

50. screen.css application/reset.css
application/fonts.css
print.css application.css
application.print.css
ie9.css announcements.css
documents.css
ie8.css events.css
layouts.css
ie7.css layout.print.css
parts.css
ie6.css user_sessions

51. @import
screen.css application/reset.css
application/fonts.css
print.css application.css
application.print.css
ie9.css announcements.css
documents.css
ie8.css events.css
layouts.css
ie7.css layout.print.css
parts.css
ie6.css user_sessions

52. /* screen.css */
@import "partials/application.css";
@import "partials/announcements.css";
@import "partials/documents.css";
@import "partials/events.css";
...

53. Too many http requests

54. # app/views/layouts/application.html.erb
<%= stylesheet_link_tag "application/reset",
"application",
"announcements",
"documents",
“events”,
...
:cache => "screen",
:media => “screen” %>

55. Development
# when ActionController::Base.perform_caching is false =>
<link href="/stylesheets/application/reset.css" media="screen" rel="stylesheet" type="text/
css" />
<link href="/stylesheets/application.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/announcements.css" media="screen" rel="stylesheet" type="text/css" /
>
<link href="/stylesheets/documents.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/stylesheets/events.css" media="screen" rel="stylesheet" type="text/css" />
...

56. Production
# when ActionController::Base.perform_caching is true =>
<link href="/stylesheets/application/screen.css" media="screen" rel="stylesheet" type="text/
css" />

57. Problems with CSS

58. CSS History
CSS1 CSS2
1996 2005 2010

59. W3C move slowly

60. “14 years of CSS has
basically given us...”

61. “more selectors
+
more properties”
- Wynn Netherland

62. Enter meta-frameworks

63. • Increase productivity
• Limit damage (they compile!)
• Progressive

64. CSS
table.events {
margin: 14px 0 7px;
}
table.events td {
background: #ccc;
}
table.events td h4 {
margin-top: 6px;
font-size: 1.2em;
}
table.events td a {
color: #f00;
}

65. LESS CSS
@silver: #ccc;
@red: #f00;
table.events {
margin: 14px 0 7px;
td {
background: @silver;
h4 {
margin-top: 6px;
font-size: 1.2em;
}
a{
color: @red;
}
}

66. SCSS
$silver: #ccc;
$red: #f00;
table.events {
margin: 14px 0 7px;
td {
background: $silver;
h4 {
margin-top: 6px;
font-size: 1.2em;
}
a{
color: $red;
}
}

67. SASS
$silver: #ccc
$red: #f00
table.events
margin: 14px 0 7px
td
background: $silver
h4
margin-top: 6px
font-size: 1.2em
a
color: $red

68. SASS vs SCSS/LESS
• SASS is a language • SCSS/LESS act like
extensions of CSS
• You can’t use CSS in • You can use CSS in SCSS/
SASS LESS
• SASS looks different to • SCSS/LESS looks like CSS
CSS extended

69. SCSS
$silver: #ccc;
$red: #f00;
table.events {
margin: 14px 0 7px;
td {
background: $silver;
h4 {
margin-top: 6px;
font-size: 1.2em;
}
a{
color: $red;
}
}

70. Compiles to CSS

71. Benefits of SCSS for
teams

72. Variables

73. $silver: #ccc;
$red: #f00;
a { color: $red; }
small { color: $silver; }

74. • Front-end developers can set colours to be
used throughout all styles
• Let guess-work when introducing colours
• DRYer

75. Define all colour, size and
grid variables in
application.scss

76. # application.scss
$max_width: 1080px;
$column: 80px;
$gutter: 18px;
$orange: #FE4110;
$purple: #56017A;
$red: #BA0000;
$grey: #505050;
$light_grey: #AEAEAE;
...

77. Don’t use any colour
codes or grid sizes
anywhere except here

78. body {
max-width: $max_width;
}
article {
margin: $gutter;
width: $column * 6;
}
em.crazy_bargain {
color:$orange;
}

79. Nesting

80. table.events { margin: 14px 0 7px;}
table.events td { background: #ccc;}
table.events td h4 { margin-top: 6px; font-size: 1.2em;}
table.events td a { color: #f00;}
becomes
table.events {
margin: 14px 0 7px;
td {
background: #ccc;
h4 { margin-top: 6px; font-size: 1.2em;}
a { color: #f00;}
}
}

81. • Less code
• DRYer
• Easier to make bigger changes

82. Good Practice: Nesting

83. Educate your developers
a{
color: $pink;
&:hover {
color: $green;
}
}

84. Mixins

85. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
ul li a { @include rounded(6px); }

86. • Define once, use lots
• Facilitates transitioning CSS technology
• DRY

87. Define core mixins in application.scss

88. // application.scss
...
@mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
@mixin rounded-top($radius: 10px) {
-moz-border-radius-topleft: $radius;
-moz-border-radius-topright: $radius;
-webkit-border-top-left-radius: $radius;
-webkit-border-top-right-radius: $radius;
}
@mixin gradient($from, $to) {
background: -moz-linear-gradient(50% 0, $from, $to);
background: -webkit-gradient(linear, 50% 0, 50% 100%, from($from), to($to));
}

89. Make every file a whole lot of mixins

90. // partials/application.scss
$preset: #000;
// partials/bulletins.scss
@mixin bulletins { ... }
// partials/events.scss
@mixin events { ... }

91. Then include them in the order they’re
required

92. // screen.scss
@import "partials/application"
@import "partials/bulletins"
@import "partials/events"
@include bulletins;
@include events;

93. Use @mixins to nurture and transition to
CSS3

94. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
ul li a { @include rounded(6px); }

95. Sprites

96. 1 File
1 http request
Loads of images

97. @mixin sprites($x_offset: 0, $y_offset: 0) {
background-image: url(/images/sprites.png);
background-repeat: no-repeat;
background-position: -$x_offset -$y_offset;
}
@mixin icon_sprite($sequence) {
// icons start 350px down
@include sprites(($sequence * 30px) + 350px);
}
a.new {
display: inline-block;
padding-left: 25px;
@include icon_sprite(1);

98. Selector Inheritance

99. .button {
background: black;
color: white;
&:hover {
background: white;
}
}
.funky_button {
@extend .button;
color: pink;
}

100. Create a solid base
Educate of it’s use

101. // a list of buttons
// ul
.buttons {
display: block;
margin: 0;
padding: 0;
list-style: none;
li {
display: block;
margin: 0;
padding: 0;
a{
display: block;
padding: 8px 15px;
}

102. Functions

103. $purple: #56017A;
table.striped {
tr:nth-child(odd) {
background: lighten($purple, 80%);
background: transparentize($purple, 0.2);
}
}

104. lighten() and darken() means there
is no colour guesswork

105. Can easily simplify the colour palette of your
interface

106. $visible_light: #ccc;
#lights_are {
&.on {
background: lighten( $visible_light, 35% );
color: $visible_light;
}
&.off {
background: darken( $visible_light, 35% );
color: $visible_light;
}
}

107. @import

108. // screen.scss
@import "partials/application"
@import "partials/bulletins"
@import "partials/events"

109. Importing happens server-side

110. 1 http request

111. Using Frameworks

112. Blueprint example

113. #container {
@include container;
.form_row {
@include column(24);
.label {
@include column(3);
font-weight: bold;
}
.child_block {
@include column(12);
.label {
@include clearfix;
}

114. Problems

115. Problems

116. Challenges

117. semantic variable names can work

118. $bright: orange;
a:hover { color: $bright; }

119. But they’re hard to remember

120. Which can create problems

121. $purple: purple; // purple
gets changed to
$purple: green; // green

122. Multiple mixin
definitions

123. @mixin rounded($radius: 10px) {
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
border-radius: $radius;
}
// Already defined so just a rename
@mixin round($radius: 10px) {
@include rounded($radius);
}

124. Forms

125. Create a base form stylesheet
Include all variations
Special use-cases can go into
section file

126. Sounds tough

127. Compass brings the structure

128. Compass makes it easy to tack on
frameworks
Blueprint 960 YUI

129. @include ‘blueprint’
@include ‘css3’

130. app/stylesheets/ # all scss files
public/stylesheets/ # compiled css
goes here

131. %end/