https://github.com/aeo/style-guide
Scott Kehr
body .myClass div {
...
}body div .myClass {
...
}Make sure far right element is specific.
.arial {
font: normal 11px/1.2 Arial, Helvetica, sans-serif;
}
.big {
font-size: 15px;
}<h1 class="arial big">Big Font</h1>
<h2 class="arial">Normal Font</h2>.header,
.title {
font: normal 11px/1.2 Arial, Helvetica, sans-serif;
}
.title {
font-size: 15px
}<h1 class="title">Big Font</h1>
<h2 class="header">Normal Font</h2><html class="factoryBranding">
<link href="/factory/stylesheets/brandstyles.css"/>
<a class="button">My Button</a>
</html>No need to scope if CSS is only used within scoped element
.factoryBranding .button {
...
}.button {
...
}.main-nav ul li ul li div {
...
}Stay away from complex selectors
.main-nav
ul
li
ul
li
divDon't do it. If this is necessary, then there is probably something wrong with your original style.
- Stay away from !important
- Don't use ID's for styling
- Don't prepend selectors with elements
- Open Webkit
- Select the Profile tab
- Select Collect CSS Selector Profile and click Start
- Load the page and click Stop
- Select your profile on the left
- What will your styles look like on a mobile platform?
- What could you do to improve the mobile experience?
- Are these changes feasible?
Try basing media queries off of content instead of device display size
Try using flexbox for grid layouts
http://learnboost.github.io/stylus/
http://visionmedia.github.io/nib/
/manifest/webcommon/category.json
{
"src": [
"<%= common_css %>category/category.css",
"<%= common_css %>category/brandstyles.css",
"<%= common_css %>category/widget.css"
],
"dest": "<%= common_css %>category/min/category.css"
}
/webcommon.war/stylesheets/category/category.css
@import category
@import brandstyles
@import widget