ID and class naming
Always use ID and class names that reflect the purpose and use of the element, or other common names. Instead of appearances and obscure names.
Names that are specific and reflect the purpose of the element should be preferred because these are the most understandable and least likely to change.
Common names are just alternative names for multiple elements. They are the same among their sibling elements and have no special meaning.
Distinguish them so that they have a special meaning and are often needed as "helpers".
Although the semantics of class names and IDs have no practical meaning for computer parsing,
Semantic names are usually the right choice because they represent information that does not impose expressive limitations.
Not recommended
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}recommend
.heavy {
font-weight: 800;
}
.important {
color: red;
} Reasonable avoidance of IDs
Normally IDs should not be applied to styles.
ID styles cannot be reused and you can only use an ID once per page.
The only effective use of IDs is to determine position within a web page or entire site.
Nonetheless, you should always consider using class instead of id unless you are only using it once.
Not recommended
#content .title {
font-size: 2em;
}recommend
.content .title {
font-size: 2em;
} Another argument against using IDs is that selectors containing IDs are highly weighted.
A selector containing only one ID has a higher weight than a selector containing 1000 class names, which makes it weird.
// This selector has a higher weight than the following selector #content .title {
color: red;
}
// than this selector!
html body div.content.news-content .title.content-title.important {
color: blue;
} Avoid tag names in CSS selectors
When constructing selectors you should use clear, precise and semantic class names. Don't use tag selectors. It's easier to maintain if you only care about your class names, not your code elements.
Thinking from a separation perspective, html tags/semantics should not be allocated in the presentation layer.
It could be an ordered list that needs to be changed to an unordered list, or a div that needs to be converted into an article.
If you only use meaningful class names,
And without using element selectors, then you only need to change your html markup without changing your CSS.
Not recommended
div.content > header.content-header > h2.title {
font-size: 2em;
}recommend
.content > .content-header > .title {
font-size: 2em;
} as precise as possible
Many front-end developers do not use direct sub-selectors when writing selector chains (note: the difference between direct sub-selectors and descendant selectors).
Sometimes, this can lead to painful design issues and sometimes it can be performance-consuming.
However, in any case, this is a very bad practice.
If you're not writing a very general selector that needs to match to the end of the DOM, you should always consider direct subselectors.
Consider the following DOM:
<article class="content news-content"> <span class="title">News event</span> <div class="content-body"> <div class="title content-title"> Check this out </div> <p>This is a news article content</p> <div class="teaser"> <div class="title">Buy this</div> <div class="teaser-content">Yey!</div> </div> </div> </article>
The following CSS will be applied to all three elements with title class.
Then, to resolve the different styles under the title class under the content class and the title class under the teaser class, this will require more precise selectors to rewrite their styles again.
Not recommended
.content .title {
font-size: 2rem;
}recommend
.content > .title {
font-size: 2rem;
}
.content > .content-body > .title {
font-size: 1.5rem;
}
.content > .content-body > .teaser > .title {
font-size: 1.2rem;
} abbreviation attribute
CSS provides various abbreviated properties (such as font) that should be used whenever possible, even when only one value is set.
Using abbreviated attributes is useful for code efficiency and readability.
Not recommended
css code:
border-top-style: none; font-family: palatino, georgia, serif; font-size: 100%; line-height: 1.6; padding-bottom: 2em; padding-left: 1em; padding-right: 1em; padding-top: 0;
recommend
css code:
border-top: 0; font: 100%/1.6 palatino, georgia, serif; padding: 0 1em 2em;
0 and units
Omit units following the "0" value. Do not use units after a 0 value unless there is a value.
Not recommended
css code:
padding-bottom: 0px; margin: 0em;
recommend
css code:
padding-bottom: 0; margin: 0;
Hexadecimal notation
Where possible, use 3-character hexadecimal notation.
Color values allow representation like this,
The 3-character hexadecimal representation is shorter.
Always use lowercase hexadecimal numbers.
Not recommended
color: #FF33AA;
recommend
color: #f3a;
Separator between ID and Class name
Use a hyphen (dash) to separate the words in the ID and Class name. To enhance lesson understanding, do not use any characters (including none) other than hyphens (dashes) to connect words and abbreviations in the selector.
Additionally, as a standard, the default attribute selector recognizes hyphens (dashes) as word separators for [attribute|=value],
So it's best to stick to hyphens as separators.
Not recommended
.demoimage {}
.error_status {} recommend
#video-id {}
.ads-sample {}Hacks
Avoid user-agent detection and CSS “hacks” – try a different approach first. Style differences are easily solved through user-agent detection or special CSS filters, workarounds, and hacks. Both methods should be considered a last resort in order to achieve and maintain an efficient and manageable code base. In other words, user agent detection and hacks in the long run
Will hurt the project, as projects should always take the path of least resistance. That said, user-agent detection and hacks are easily allowed to be used too often in the future.
Declaration order
This is a rough outline of the order in which CSS properties are written within a selector. This is important to ensure better readability and scannability.
As a best practice, we should follow the following sequence (which should be in the order of the table below):
Structural properties:
display
position, left, top, right etc.
overflow, float, clear etc.
margin, padding
Expressive properties:
background, border etc.
font, text
Not recommended
.box {
font-family: 'Arial', sans-serif;
border: 3px solid #ddd;
left: 30%;
position: absolute;
text-transform: uppercase;
background-color: #eee;
right: 30%;
isplay: block;
font-size: 1.5rem;
overflow: hidden;
padding: 1em;
margin: 1em;
}recommend
.box {
display: block;
position: absolute;
left: 30%;
right: 30%;
overflow: hidden;
margin: 1em;
padding: 1em;
background-color: #eee;
border: 3px solid #ddd;
font-family: 'Arial', sans-serif;
font-size: 1.5rem;
text-transform: uppercase;
}end of statement
To ensure consistency and extensibility, each statement should end with a semicolon and wrap each statement on a new line.
Not recommended
css code:
.test {
display: block; height: 100px
}recommend
css code:
.test {
display: block;
height: 100px;
}End of attribute name
Use a space after the colon in the property name. For consistency reasons,
Always use a space between the attribute and the value (but no space between the attribute and the colon).
Not recommended
css code:
h3 {
font-weight:bold;
}recommend
css code:
h3 {
font-weight: bold;
}Separation of selectors and declarations
Always use a new line for each selector and property declaration.
Not recommended
css code:
a:focus, a:active {
position: relative; top: 1px;
}recommend
css code:
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}Rule separation
Rules are always separated by a blank line (double newline).
recommend
css code:
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}CSS quotes
Enclose attribute selectors or attribute values in double quotes ("") instead of single quotes (").
Do not use quotes for URI values (url()).
Not recommended
css code:
@import url('//cdn.com/foundation.css');
html {
font-family: 'open sans', arial, sans-serif;
}
body:after {
content: 'pause';
}recommend
css code:
@import url(//cdn.com/foundation.css);
html {
font-family: "open sans", arial, sans-serif;
}
body:after {
content: "pause";
}Selector nesting (SCSS)
In Sass you can nest selectors, which can make the code cleaner and more readable. Nest all selectors, but try to avoid nesting selectors without any content.
If you need to specify some style attributes for child elements, and the parent element will not have style attributes,
Regular CSS selector chains can be used.
This will prevent your script from looking too complex.
Not recommended
css code:
// Not a good example by not making use of nesting at all
.content {
display: block;
}
.content > .news-article > .title {
font-size: 1.2em;
}Not recommended
css code:
// Using nesting is better but not in all cases
// Avoid nesting when there is no attributes and use selector chains instead
.content {
display: block;
> .news-article {
> .title {
font-size: 1.2em;
}
}
}recommend
css code:
// This example takes the best approach while nesting but use selector chains where possible
.content {
display: block;
> .news-article > .title {
font-size: 1.2em;
}
}Introducing blank lines in nesting (SCSS)
Leave an empty line between nested selectors and CSS properties.
Not recommended
css code:
.content {
display: block;
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}recommend
css code:
.content {
display: block;
> .news-article {
background-color: #eee;
> .title {
font-size: 1.2em;
}
> .article-footnote {
font-size: 0.8em;
}
}
}Contextual Media Query (SCSS)
In Sass, you can also use contextual media queries when you nest your selectors.
In Sass, you can use media queries at any given level of nesting.
The resulting CSS will be transformed so that the media query will be rendered as a wrapped selector.
This technology is very convenient,
Helps keep the context in which the media query belongs.
The first approach allows you to write your mobile styles first and then use contextual media queries to provide desktop styles wherever you need them.
Not recommended
css code:
// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate
// the content in the media query to the content in the upper part (mobile style)
.content-page {
font-size: 1.2rem;
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
}
}
@media screen and (min-width: 641px) {
.content-page {
font-size: 1rem;
> .main > .latest-news > .news-article > .title {
font-size: 3rem;
}
> .page-footer {
font-size: 0.8rem;
}
}
}recommend
css code:
// This is the same example as above but here we use contextual media queries in order to put the different styles
// for different media into the right context.
.content-page {
font-size: 1.2rem;
@media screen and (min-width: 641px) {
font-size: 1rem;
}
> .main {
background-color: whitesmoke;
> .latest-news {
padding: 1rem;
> .news-article {
padding: 1rem;
> .title {
font-size: 2rem;
@media screen and (min-width: 641px) {
font-size: 3rem;
}
}
}
}
> .content {
margin-top: 2rem;
padding: 1rem;
}
}
> .page-footer {
margin-top: 2rem;
font-size: 1rem;
@media screen and (min-width: 641px) {
font-size: 0.8rem;
}
}
}Nested order and parent selectors (SCSS)
When using Sass’s nesting functionality,
The important thing is to have a clear nesting order,
The following is the order a SCSS block should have.
Style attributes of the current selector <br/>Pseudo-class selector of the parent selector (:first-letter, :hover, :active etc)
Pseudo-class elements (:before and :after)
Declaration style of parent selector (.selected, .active, .enlarged etc.)
Use Sass’s contextual media query sub-selector as the final piece
The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.
Recommended
css code:
.product-teaser {
// 1. Style attributes
display: inline-block;
padding: 1rem;
background-color: whitesmoke;
color: gray;
// 2. Pseudo selectors with parent selector
&:hover {
color: black;
}
// 3. Pseudo elements with parent selector
&:before {
content: "";
display: block;
border-top: 1px solid gray;
}
&:after {
content: "";
display: block;
border-top: 1px solid gray;
}
// 4. State classes with parent selector
&.active {
background-color: pink;
color: red;
// 4.2. Pseuso selector in state class selector
&:hover {
color: darkred;
}
}
// 5. Contextual media queries
@media screen and (max-width: 640px) {
display: block;
font-size: 2em;
}
// 6. Sub selectors
> .content > .title {
font-size: 1.2em;
// 6.5. Contextual media queries in sub selector
@media screen and (max-width: 640px) {
letter-spacing: 0.2em;
text-transform: uppercase;
}
}
}