Difficult to maintain.
CSS is simple.
Simple to understand.
Simple to use.
Slide 4
Slide 4 text
How we do CSS
> common
common.css
style.css
> pages
calendar.css
reports.css
profile.css
records.css
> records
prescriptions.css
treatments.css
Slide 5
Slide 5 text
Repetition
Loads of floats, font sizes, widths, etc.
Non generic
Styles are extremely specific to a certain page/element.
Bloat
File sizes get bigger and bigger as more features are added.
Slide 6
Slide 6 text
Reusability is almost non-existent
Developers don’t trust other’s code.
Fragile
A single change can screw up the layout.
Overwriting, specificity war. (I’m looking at you, bootstrap)
Further reading: http://blog.trifork.com/2013/06/04/twitter-bootstrap-why-you-
should-not-use-it/
Slide 7
Slide 7 text
Debugging
Slide 8
Slide 8 text
2009
Nicole
Sullivan
@stubbornella
Slide 9
Slide 9 text
Abstraction Modularity Inheritance
Slide 10
Slide 10 text
Instead of
> common
common.css
style.css
> pages
calendar.css
reports.css
profile.css
records.css
> records
prescriptions.css
treatments.css
Lego driven development
Start designing individual pages only after all the legos have been
defined.
> pages
calendar.css
records.css
profile.css
Slide 16
Slide 16 text
Caveats
Consistency
A Heading should not become a Heading in another part of page.
Write generic components
/* Bad typography.scss */
.font12 {
font-size: 12px;
}
.font16 {
font-size: 16px;
}
/* Good typography.scss */
.smalltext {
font-size: 10px;
}
.bigtext {
font-size: 16px;
}
We have to do it. All of us have done it at some point of time.
.perfectly-positioned-div {
margin-top: -2px;
}
a {
color: #BADA55 !important;
}
Life is hard...
shame.css
The code you have to write to get the release out on time/ fix a
bug quickly but the code that makes you ashamed.
Slide 19
Slide 19 text
/**
* Nav specificity fix.
*
* Someone used an ID in the header code (`#header a {}`)
* which trumps the nav selectors (`.site-nav a {}`).
* Use!important to override it until I get the chance to
* refactor the header.
*/
.site-nav a {
color: #BADA55 !important;
}
1. If it’s a hack, it goes in shame.css.
2. Document all hacks fully.
3. Do not blame the developer; if they explained why they had to do it then
their reasons are (hopefully) valid.
4. Try and clean shame.css up as soon as you get time (preferably in the very
next sprint).
Further reading: http://csswizardry.com/2013/04/shame-css/
Slide 20
Slide 20 text
https://github.com/causes/scss-lint#linters
https://github.com/CSSLint/csslint
Basic syntax checking as well as applying a set of rules to the code that
look for problematic patterns or signs of inefficiency.
Linting
.selector {
property: value;
}
div {
width: 100px;
padding:0 10px;
}
1: warning at line 3, col 2
Using width with padding can sometimes
make elements larger than you expect.