- Consistency
- Maintainability
- Readability
- Scalability
PostCSS details coming soon
We prefix our directories with the number associated with the order in which it's imported in my main styles.css file.
css/
|
| -- 0_vendor/
| -- 1_settings/
| -- 2_base/
| -- 3_components/
| -- 4_layout/
| -- 5_helpers/
| -- 6_overrides/
0_vendor includes any third party CSS that can't be imported via npm.
1_settings is a place to store global variables, mixins, etc. that don't directly compile into CSS.
2_base is where classless element selectors are given some basic styles.
3_components includes all of our repeatable patterns, or components. Component classes are prefixed with c-.
4_layout includes styles for more structural elements like page layouts and grids. Layout classes are prefixed with l-.
5_helpers is where "helper" classes are defined. Helper classes are prefixed with h- and include an !important rule.
6_overrides - Override vendor styles, write hacky CSS due to framework limitations, etc.
The main file, styles.css, looks something like this:
/* ==========================================================================
* Styles
* ========================================================================== */
/* Vendor */
@import "normalize.css";
@import "0_vendor/...";
/* Settings */
@import "1_settings/...";
/* Base */
@import "2_base/...";
/* Components */
@import "3_components/...";
/* Layout */
@import "4_layout/...";
/* Helpers */
@import "5_helpers/...";
/* Overrides */
@import "6_overrides/...";We use the following namespacing:
| Type | Prefix | Example |
|---|---|---|
| Components | c- |
c-buttonc-card |
| Layout Modules | l- |
l-containerl-grid |
| Helpers | h- |
h-clearfix |
| States | is-has- |
is-activehas-loaded |
| JavaScript Hooks | js- |
js-accordion |
We use the BEM naming convention:
.block { ... }
.block__element { ... }
.block--modifier { ... }
.block__element--modifier { ... }- Don't use a modifier outside of the context of its owner.
<button class="c-button--large"></button><button class="c-button c-button--large"></button>- Don't combine multiple BEM entities on a single DOM node.
<button class="c-button c-icon">...</button><button class="c-button">
<span class="c-icon">...</span>
</button>Coming Soon
Use the following order for nesting selectors:
.card {
/* CSS Variables */
/* Note: Not fully supported as of 8/1/2016 http://caniuse.com/#feat=css-variables */
--color: #fff;
/* Applies and Mixins */
@apply --example;
@mixin --something;
/* Declaration List */
display: block;
...
z-index: 1;
/* Media Queries */
@media screen and (min-width: 900px) {
...
}
/* Pseudo States */
&:hover {
...
}
/* Pseudo Elements */
&::before,
&::after {
...
}
&:nth-child(odd) {
...
}
/* Modifiers */
&--small {
...
}
/* Concatenated Selectors */
&.is-active {
}
/* Nested Elements */
&__body {
...
}
/* Nested Selectors */
.label {
...
}
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent