Design best practice for a re-usable CSS - your front devs will say thanks

Design best practice for a re-usable CSS - your front devs will say thanks

Who and why ?


About me

Based on personnal experiences

  • learning from own mistakes
  • learning from other's mistakes
  • sharing what I learned

Re-usable code and design?


Consider the design elements as small repeating visual patterns

Consistent interface for an easy and reusable CSS


Work in plain values

 work in pixel

Color uniformity

  • Avoid uncertain color picker
  • Create color palettes
  • LESS and Sass variables
@color: #10709c;

	color: @color;

Different color formats for more flexibility

CSS color formats

rgb() => rgba()

	background: rgb(249, 118, 30);



	background: hsl(24, 95%, 55%);


And preprocessor color functions :
lighten(background: rgb(81, 130, 222);, 10%);

Work with a grid

  • helps visually organize blocs while designing
  • brings clarity and visual balance into the design
  • Gestalt proximity law

Work with a grid

<div class="row-fluid">
	<div class="span4">4</div>
	<div class="span8">8</div>

Consistency of interface buttons

  • Visual affordance for the user to remember
  • Start with the global  re-usable styling ( shape, type, dimension, etc.)
  • Color / size declination of the same button

Consistent typography

Create a style guide

  • Developers will ❤ you (and your design)
  • Specify size, style, font, etc

Using Style Tile

Consistency in interface = User experience benefits

  • Helps navigation
  • Visual Affordance
  • Visual Hierarchy

Developer are no telepaths

- and neither are designers -


Provide the different states of elements

  • :hover, :active, :focus and :visited states in the design phase
  • Be consistent
  • Communication : highlight interactions in the design
  • CSS3 animation to the rescue

Hidden elements : what happens when user clicks ?

  • Drop-down, sub-menus design
  • Modals: what does it look like ?

Interface feedbacks message

  • Anticipate form error message: what, where, when ?
  • Message a human can understand
  • Explicit buttons message

Communication is the key

  • When in doubt, ask questions
  • As a designer : show the design in its early stage
  • As a developer: challenge yourself

Typography and fonts on the web

- the good, the bad and the messy -


Using safe webfont families for main text content

  • Once upon a time, there was a Myriad Pro font ...
  • Test different fonts for the same family
  • Test the fonts on different browsers / OS
  • Test the font on different devices

Adding "exotic" webfonts for some text elements

  • @font-face (Google Fonts, etc.)
  • Beware page load
  • Test the font-subsetting (é, ö, etc.)
  • Beware the Photoshop antialiasing

Making sure your developer/Client can legally use the font

  • Font licenses vary, so beware of licensing restrictions for each font-face
  • Embed might be available from online services like

Units and colors

  • Using many colors on the same piece of text is technically possible, but ...
  • On the web, half pixels don't exist (i.e. 12.5px)

On design software's specific text effects


Semi-bold, thin, light, condensed font styles

  • You can't reproduce those in CSS
  • Safest way : normal (400), bold (700) and real italic style
  • @font-face "faking" = download one font per style

Software's vertical and horizontal font scaling

  • This does not exist in CSS
  • You are destroying the font balance


  • CSS hyphenation does exist but… not well supported
  • Heritage from the print
  • So switch it off in Photoshop

Re-usable Layer effects


Box and text-shadow effects

  • Have consistency into the shading
  • Many possibilities using box-shadow and text-shadow

Linear gradient - the button trick

.btn {
	padding: 1em 2em; 
	font-size: 0.7em; 
	font-weight: bold; 
	color: #fff; 
	border-radius: 4px;	
	border: 1px solid rgb(250, 117, 27);	
	background-color: rgb(250, 117, 27);
	box-shadow: inset 0 2px 0 rgba(255,255,255,.23);
	border: 1px solid #f9751d;
	background-image: linear-gradient(to top, rgba(0,0,0,0.1) 0%, rgba(255,255,255,0.1) 100%);
.btn.alternate {	

Form elements design


Form elements (almost) easy to style

  • Inputs fields and text areas
  • Submit elements: <input type="submit"> and <button>
  • Checkboxes (and radio buttons) with a little bit of CSS tricks



See Codepen for CSS

Form elements messy to style

  • <select> elements
  • Beware accessibility
  • Beware mobile behavior

Modular and future-proof content strategy

- Design with the unexpected in mind! -


The web is a vertical medium

  • If possible, work with "real" content
  • Design with vertical expansion in mind

Design with different screensize in mind from the start

  • Think about mobile layout when you start in the design phase
  • Helps the developer make suitable code decisions

Test other languages in the design phase

  • Flexible content is also language flexibility
  • Settings - Einstellungen - Configurações ?
  • Re-usable CSS that does not need tweak for every language

On Handing over the files


Don't merge/rasterize layer, use "Smart object"

  • Rasterized layers are unusable for the developer
  • Use smart objects instead = object oriented thinking in the design phase
  • Inception : don't abuse them

This is also true for images

  • Non destructive mode for images
  • Image asset into the best quality possible
  • Make sure you (and the client) can legally use the image

Towards pixel independence

  • High resolution screen => need for more flexible format
  • Working with Illustrator for easy SVG conversion
  • Shape layer in Photoshop

Making sure all texts are easily re-usable

  • Goal : copy/paste and quickly see styling
  • Avoiding using multiple styles on one text element

Organizing your mess - you don't want to tidy some else's room, right?

  • Organizing from the start is easier
  • Quick tip: Autoselect layer = on !
  • Unlocking those layers

And that's about it ...

Merci beaucoup :)