As stated previously we ensure all CSS is actually written in SCSS, being careful when and where to nest our style elements.
DO NOT use id for styling purposes. Acceptable uses for id include:
- JavaScript selection - prefix these with
js-to indicate they are for JavaScript only - Assigning form labels to inputs
- Jump links between sections of a page
<div class="js-camel-case" id="js-camelCase"> ... </div><label for="firstName">First Name</label>
<input type="text" id="firstName" class="form-cotrol" /><a href="#mainContent">Skip to Main Content</a>
...
<div class="content" id="mainContent"> ... </div>Like IDs use camelCase for SCSS Variable names:
$fontDefault: 'Helvetica', sans-serif;
$darkGray: #333;
$red: #F00;Use dashes - NOT undescores _ in class names.
<div class="camel-case"> ... </div>
<div class="js-camel-case"> ... </div>Class names should be specific enough so that you can comprehend the name without context, but generic enough for reuse throughout the code base.
.post-card {}
.kamino {}
.container {}
.btn {}
.icn {}For more information on our naming conventions and structures please visit our CSS page. Alternatively read our methodology.
.post-card {
position: relative;
padding: 10px;
border: 1px solid black;
}Use a hyphen before a class member (sub-component) name, prefixed with the base class name. Ensure it is nested as these sub-components are only used within their base element blocks.
.post-card {
padding: 10px;
position: relative;
.post-header {
margin-bottom: 10px;
}
.post-body {
margin-bottom: 10px;
}
.post-footer {
border-top: 1px solid black;
}
}If a modifier needs to be created. i.e a background modifier. New button modifier etc. Please note we at times append !important to ensure it is style used.
'bg' is the shorthand for background when used for class names.
.bg-black {
background-color: black !important;
}'bt' is the shorthand for button when used for class names.
.btn-black {
background-color: black !important;
}Place the opening curly-bracket of each rule block on the same line as the last selector.
Place the closing curly-bracket of each rule block on its own line after the final property of the rule block.
.selector {
color: white;
font-family: 'Helvetica', sans-serif;
}We use the google css standards for spacing:
Tab Size = 2
Indent = 2
Continuation Indent = 2
Put each property on its own line.
Follow each property with a colon and a single space.
.selector {
color: #ff0000;
font-family: 'Helvetica', sans-serif;
}Follow each property value with a semi-colon.
.selector {
color: #ff0000;
font-family: 'Helvetica', sans-serif;
}Remove all trailing whitespace.
Separate each rule block by an empty line.
.selector {
color: #ff0000;
font-family: 'Helvetica', sans-serif;
}
.selector {
color: #ff0000;
font-family: 'Helvetica', sans-serif;
}CSS properties should be grouped by commonality (display, then box-model, then positioning, then background/color, then typography, then misc/etc).
.selector {
display: block;
width: 400px;
height: 222px;
padding: 4px;
margin: 2px;
position: absolute;
top: 22px;
left: -12px;
color: #ffffff;
font-family: 'Helvetica', sans-serif;
text-transform: uppercase;
text-indent: 0;
}As we use a build tool to generate our css, there is no need to vendor-prefix within your SCSS file. This will be done via the compiler. Please take a look at our Build Tools page for more info.
As a rule, we accommodate the latest 2 browser versions, we do not support below IE 10.
Use resources like http://caniuse.com/ to see whether features can be used, and in what browser.
Use single quotes.
File Paths and Data URIs
Use single quotes for file paths and data URIs.
.selector {
background-image: url('background.png');
}Font Family
Use single quotes for font names unless they are system fonts that don't require them.
.selector {
font-family: 'LeagueGothic', Helvetica, Arial, sans-serif;
}Generated Content
Use single quotes around generated content values.
.selector:before {
content: 'Chapter:';
display: inline;
}Attribute Selectors
Use single quotes around values in attribute selectors.
input[type='text'] {
color: #ff0000;
}Separate multiple selectors in the same rule block with a comma and place each selector on a new line.
.selector:focus,
.selector:active {
color: #ff0000;
font-family: Times, 'Times New Roman', serif;
}Group related rule blocks by base object using the standardized section comment style.
/* ---------------------------------------------------------------------
Post
------------------------------------------------------------------------ */
.post-card {
padding: 20px;
background-color: #ccc;
}If a section requires additional subsets of comments, a single line comment is acceptable.
If a property / value pair needs additional clarity or is not self-documenting, add comments on the same line immediately following the value.
/* ---------------------------------------------------------------------
Horizontal List
------------------------------------------------------------------------ */
.list-horiz {
overflow: hidden;
}
.list-horiz > * { float: left; }.carousel {
position: relative; /* A positioning reference for .carousel-nav */
}
.carousel-nav {
position: absolute; /* Positioned against .carousel base class */
right: 20px;
bottom: 20px;
z-index: 10; /* Pull navigation on top of .carousel-slides */
}Use three characters and lowercase hexadecimal notation where you can. We se SCSS so define variables once then reuse through documents.
.selector {
background-color: #f00;
}Mark todos and action items with a comment that includes TODO. Be sure that TODO is always uppercase.
/* TODO - Review content styles */
.selector {
color: #ff0000;
}Avoid cross module contextual selection.
/* DO NOT */
.selector .hrz {
}If a single module can make use of a contextual selector (as the markup structure is known), be sure to apply it with the proper depth of applicability.
.list > li { }Keep selector specificity as low as possible, opting for a single class as the best selector.
.selector {
padding: 20px;
background-color: #ccc;
}Resources
- http://www.w3.org/TR/css3-selectors/#specificity
- http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html
- http://css-tricks.com/specifics-on-css-specificity/
- http://www.standardista.com/css3/css-specificity/
Use of shorthand is encouraged unless setting a single value.
When using shorthand, be explicit and define all values.
.selector {
margin: 12px 0 16px 0;
}We will work with 3 units of measure being pixels, rem's and percentages. These units of measure will be used in different ways as outlined below.
PLEASE NOTE: The body font size will be in pixels all other font sizes will be in rem's.
The body font size should be in pixels.
html {
font-size: 16px;
}All font sizes thereafter should be in rem's. 1rem being equal to 16px.
.my-title {
font-size: 1rem;
}Spacing should be done primarily using pixels.
.mt-10 {
margin-top: 10px;
}However if using Bootstrap 4, you have the option of using rem's for more information visit the Bootstrap 4 documentation.
... Assuming the root font size is 16px.
mt-1 {
margin-top: .25rem; // 4px.
}
.mt-2 {
margin-top: .5rem; // 8px
}
.mt-3 {
margin-top: 1rem; // Default value (16px)
}Whichever unit of measure chosen be sure to stick to using it throughout the project to not confuse future people working on the project.
Container and Block sizing
.element-block {
width: 25%;
margin-bottom: 10px;
}Declare line-height values as unit-less. Unit-less line heights act as a multiplier to the text size for a given element.
.selector {
font-size: 16px;
line-height: 1.5;
}Use hexadecimal notation for color values. RGBA is acceptable if opacity is needed, but be sure to provide a fallback for browsers that don't support RGBA.
.selector {
color: #ff0000;
}
.selector {
color: #ff0000; /* fallback for non-rgba browsers */
color: rgba(255, 0, 0, 0.8);
}