IV - CSS architecture

< w e b / F>
CSS architecture
CSS is as important as JavaScript

< w e b / F><web/F>
Why CSS architecture?
It is not as trivial as you think

< w e b / F><web/F>
CSS tragedy
The great tragedy of CSS is that it doesn’t stop your application
if CSS is broken.
And that is why CSS always takes a backseat to JavaScript.

< w e b / F><web/F>
If CSS break
• Breaking of JavaScript may disable use of certain feature.
• But if CSS is broken, then your presentation layer break. This is big
compromise on User experience.
• Bad UX is definitely a game loser.

< w e b / F><web/F>
Why do we need CSS architecture?
• Just one word - maintainability
• Enterpriseapplication developmentis a world of
• RRC – Rapid requirement change
• Scale – Huge scale

< w e b / F><web/F>
Idea of architecture
• Set of patterns
• Promoting good practices

< w e b / F><web/F>
Tenets of good architecture
• DRY – Do not repeat Yourself
• Reusable
• Predictable
• Maintainable

< w e b / F><web/F>
Problem with plain CSS
• Repetition cannot be easily avoid
• Reuse is hard
• Future friendly CSS is hard

< w e b / F><web/F>
Days of writing plain CSS are almost over…

< w e b / F><web/F>
CSS tool chain
• CSS pre-processors
• SASS, LESS, Stylus, etc.
• CSS post-processor

< w e b / F><web/F>
SASS vs. LESS
• Which one should you chose?

< w e b / F><web/F>
CSS frameworks
• Foundation
• Bootstrap
• Others

< w e b / F><web/F>
Common CSS problems
Techniques to write better CSS

< w e b / F><web/F>
Problem 1
CSS code structure
How to map it properly with Angular folder structure

< w e b / F><web/F>
Problem 2
Variable naming
Choosing appropriate variable names

< w e b / F><web/F>
Max width example
$max-width: 1440px;
.about-panel {
max-width: $max-width;
}

< w e b / F><web/F>
Max width example
$max-width-1200: 1200px;
.about-panel {
max-width: $max-width-1440;
}

< w e b / F><web/F>
$max-width-primary: $max-width-1440;
.about-panel {
max-width: $max-width-primary;
}

< w e b / F><web/F>
Problem 3
Color palette design
Standardizing most powerful elements of web

< w e b / F><web/F>
/* Blue color */
$fresh_blue: #2C95DD;
$blue: #2185D0;
$retro_blue: #81A4C6;
/* Black color */
$black: #000000;
$tone_dark_1: #333333;
$tone_dark_2: #606060;
$tone_dark_3: #666666;
/* White color */
$white: #FFFFFF;
$tone_white_0: #F8F8F8;
$tone_white_1: #F0F0F0;
$tone_white_2: #E1E1E1;
$tone_white_3: #CDCDCD;
$tone_white_4: #BABCBE;
$tone_white_1_trans: rgba(225, 225,
225, 0.5);

< w e b / F><web/F>
Name that color
http://chir.ag/projects/name-that-color/
http://www.color-blindness.com/color-name-hue/

< w e b / F><web/F>
// Color palette
$color-alabaster: #F8F8F8;
$color-concrete: #F2F2F2;
$color-gray: #888888;
$color-kelp: #464637;
$color-niagara: #0AAB8A;
$color-pelorous: #3DB0B4;
$color-red-berry: #8C0000;
$color-white: #FFFFFF;
// Site wide colors
$link-color: $color-niagara;
$color-primary: $color-niagara;

< w e b / F><web/F>
Problem 4
Responsive CSS layout
Writing better readable code

< w e b / F><web/F>
Responsive layout approach
Mobile first
.contact-info-section {
margin-top: 2rem;
@media all and (min-width: 768px) {
margin-top: 4rem;
}
}
Desktop first
margin-top: 4rem;
@media all and (max-width: 768px) {
margin-top: 2rem;
}
}

< w e b / F><web/F>
Is it a good media query
margin-top: 2rem;
@media all and (min-width: 768px) {
margin-top: 4rem;
}
}

< w e b / F><web/F>
Ideal media queries
margin-top: 2rem;
@media #{$medium-up} {
margin-top: 4rem;
}
}

< w e b / F><web/F>
CSS now has feature detection
@supports (display: flex) {
div { display: flex; }
}
@supports not (display: flex) {
div { float: left; } /* alternative styles */
}

< w e b / F><web/F>
Problem 5
Future friendly CSS
Developers should not worry

< w e b / F><web/F>
How cross browser CSS is written
.about-section {
display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */
display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works)
*/
display: -ms-flexbox; /* TWEENER - IE 10 */
display: -webkit-flex; /* NEW - Chrome */
display: flex;
}

< w e b / F><web/F>
Let’s write mixin for that
@mixin display-flex() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.about-section { @include display-flex; }

< w e b / F><web/F>
Idea is to use CSS post-processor
Sass
Stylus
CSS
preprocessors
Less
Post CSS
(autoprefixer)
CSS CSS
CSS uglify
(minify, concat)
Bundled
CSS
Build script (Grunt, Gulp, NPM, etc.)

< w e b / F><web/F>
Problem 6
Being nicer to reusability
Carefully choosing selectors

< w e b / F><web/F>
Being specific
/* Grenade */
#main-nav ul li ul { }
/* Sniper Rifle */
.subnav { }

< w e b / F><web/F>
Better namespacing
/* High risk of style cross-contamination */
.widget { }
.widget .title { }
/* Low risk of style cross-contamination */
.widget { }
.widget-title { }

< w e b / F><web/F>
Component extension
/* Bad */
.widget { }
#sidebar .widget { }
/* Good */
.widget { }
.widget-sidebar { }

< w e b / F><web/F>
CSS architecture
Writing a CSS with same concern as JS is a key to better and efficient
design. Don’t ignore it.

< w e b / F><web/F>
By
Harshal Patil
@mistyharsh

IV - CSS architecture

More Related Content

What's hot

Similar to IV - CSS architecture

Recently uploaded

IV - CSS architecture