CSS, Sass, SCSS, Compass, Less, BEM, SMACSS, OOCSS, ACSS, CCSS, WTFSS?
Sass (Syntactically Awesome Style Sheets) came first. SCSS (Sassy CSS) came shortly after
Compass is a Sass extension
Less is a CSS pre-processor
OOCSS Object Oriented CSS
SMACSS Scalable and Modular Architecture for CSS.
BEM is a specific concrete application of OOCSS. BEM stands for Block Element Modifier
CCSS Component CSS
ACSS (Atomic CSS)
Tips from http://www.leemunroe.com/css/
- Try to keep styles less than 3 levels deep
- Try not to use !important, only if really needed or obvious classes e.g. a hidden class
- Stay away from Sass @extends as a general rule of thumb - they can get confusing
- Write lots of comments to document your styles
- Have a standard agreed way for you and your team to write CSS - Harry Roberts has some great CSS Guidelines
- In addition, it's good practice to have a pattern library showcasing all the styled elements that are currently available
- Try not to use * global selector
- Prefix classes with js- for class names used as Javascript hooks
- Make classes and modules reusable throughout your project
- Instead of making up names, inspect frameworks like Bootstrap for similar components
- Avoid using IDs for styling
Syntax overview
CSS
div {
font-size: 14px;
margin: 0 0 20px;
padding: 10px;
}
font-size: 14px;
margin: 0 0 20px;
padding: 10px;
}
Sass/SCSS is the most mature, stable, and powerful professional grade CSS extension language in the world
$primary-color: purple;
ul {
font-size: 14px;
margin: 0 0 20px;
li {
margin-bottom: 20px;
a {
color: $primary-color;
}
}
}
ul {
font-size: 14px;
margin: 0 0 20px;
li {
margin-bottom: 20px;
a {
color: $primary-color;
}
}
}
Compass
@import "compass/css3"
div {
@include border-radius(5px);
@include box-shadow(0 0 10px rgba(0, 0, 0, .1));
}
div {
@include border-radius(5px);
@include box-shadow(0 0 10px rgba(0, 0, 0, .1));
}
OOCSS
<div class="item">
<ul class="item-list">
<li class="item-list--item">
<h3 class="item-heading">...
<ul class="item-list">
<li class="item-list--item">
<h3 class="item-heading">...
.item {
...
}
.item-list {
...
}.item-list--item {
...
}
.item-heading {
...
}
...
}
.item-list {
...
}.item-list--item {
...
}
.item-heading {
...
}
SMACCS
Think in terms of base (defaults), modules (reusable parts), states (hidden, active) and themes. Use -- for modifiers and __ for submodules.
<div class=“container”>
<div class=“container-header”>
<div class=“container-header__title”>
<h1 class=“container-header__title--home”>
<div class=“container-header”>
<div class=“container-header__title”>
<h1 class=“container-header__title--home”>
BEM
Similar to SMACCS, naming conventions for your projects.
<ul class="menu">
<li class="menu__item">...</li>
<li class="menu__item_state_current">...</li>
<li class="menu__item">...</li>
</ul>
<li class="menu__item">...</li>
<li class="menu__item_state_current">...</li>
<li class="menu__item">...</li>
</ul>
CCSS is combines the best of SMACSS and BEM for Sass projects.
SASS
SCSS
In version 3 of Sass, the SCSS (Sassy CSS) syntax was introduced as "the new main syntax" for Sass and builds on the existing syntax of CSS.
React: CSS in JS by vjeux
CSS Frameworks:
Name | tech | strength | layout | use |
Semantic UIFoundation
|
less
|
nav,text,
transitions
|
grid
|
Transition
|
Bootstrap
|
less,sass
|
nav,
|
grid
| |
Foundation
|
sass
|
text
| ||
UIkit
|
less
| |||
960 Grid System
|
grid
| |||
Skeleton
|
grid
| |||
99lime HTML KickStart
|
nav
|
grid
|
Slideshow
| |
Kube
|
less
|
text editor, text
| ||
Less Framework
|
less
|
text, img
|
grid
| |
YAML
|
sass
|
grid, column
| ||
YUI CSS
|
list, text
|
grid, column
| ||
52framework
|
tesx, text effects
| |||
elastiCSS
| ||||
Boilerplate
|
nav
| |||
Responsive Boilerplate
|
less
|
text
|
http://responsiveboilerplate.com/demov2.2/demo.html
| |
FEM CSS Framework
| ||||
Helium
|
sass
|
https://github.com/cbrauckmuller/helium
| ||
Knacss
|
less
| |||
Groundwork CSS
|
sass
|
grid,
web,
|
Animations
| |
Gumby
|
sass
|
grid, UI, component
|
Tiles, grid
|
Tiles, Nested Grid
|
Unsemantic
|
sass
|
grid
| ||
Tuktuk
|
grid
| |||
Fluidable
|
less
| |||
Ink
|
less
|
text, nav, table
|
grid,
| |
Kickoff
|
sass
|
text
|
grid
| |
Cascade Framework
|
grid
|
grid
| ||
Cascade Framework Light
| ||||
Metro UI CSS 2.0
|
less
|
componets
| ||
Jeet
| ||||
Susy
|
sass
| |||
Inuit.css
|
sass
| |||
Topcoat
|
nav
| |||
Effeckt.css
|
transitions,animations
| |||
animate.css
|
animations
| |||
Most framework designed for layout dynamic content (text + relative images); and navigating between content data.
Included
Recommend:
and using transition effects
Groundwork CSS
| |
Semantic UIFoundation
| |
Effeckt.css
| |
animate.css
|
Web components
Comments By Emmanuel
Pure
from yahoo a nice lightweight css framework with no js dependency that lets us customize easily to the project needs
bootstraps rival
but all of them target web sites rather than UIs as we use.
But I opted for my own cherry picking ideas from all of them but mainly based on material design, after all a css framework provides the following:
Resets
Typographic aesthetics
Spatial systems
Colors palette
Utility classes
Comments By Adam:
I came across another CSS framework to add to the list, Suit CSS.
It uses naming conventions similar to BEM, and can be used alongside Rework (node package) to create a custom pre-processor in node. Twitter has been using suit.css for most of their apps/products.
The "Why" list in the Modular CSS with Suit article has a pretty good summary.
No comments:
Post a Comment