CSS and Sass (SCSS) Development specifications

This article mainly introduces the front-end Coding Specification (4)--css and Sass (SCSS) Development specifications, the need for friends can refer to the following

ID and class naming

The ID and Class (class) names always use names that can reflect the purpose and purpose 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 the least likely to change.

The generic name is just the alternate name for multiple elements, and their sibling elements are the same, with no special meaning.
Differentiate them so that they have special meanings and usually need to be "helpers".

Although the semantics of class names and IDs have little practical meaning for computer parsing,
Semantically named names are usually the right choice, because they represent the meaning of the information and do not contain the limitations of performance.

Not recommended

. fw-800 {  font-weight:800;}. Red {  color:red;}

Recommended

. heavy {  font-weight:800;}. Important {  color:red;}

reasonable avoidance of the use of IDs

In general, the ID should not be applied to the style.
The style of the ID cannot be reused and you can only use the ID once per page.
The only valid use of ID is to determine the location of a Web page or an entire site.
However, you should always consider using class, not ID, unless you use it only once.

Not recommended

#content. title {  Font-size:2em;}

Recommended

. Content. title {  Font-size:2em;}

Another objection to the use of ID is that the ID selector has a high weight.
One that contains only one ID selector is more weighted than a selector that contains 1000 class (class) names, which makes it very strange.

This selector is weighted above the selector #content. title {  color:red;}//Than this selector!html body p.content.news-content. Title.conten t-title.important {  color:blue;}

avoid tag names in CSS selectors

You should use a clear, accurate, and semantic class name when building selectors. Do not use the tag Selector. If you only care about your class (class) name
, not your code element, which is easier to maintain.

From the point of view of separation, HTML tags/semantics should not be allocated in the presentation layer.
It may be that an ordered list needs to be changed to an unordered table, or a P will be converted to article.
If you are using only the Class (class) name that is actually meaningful,
And instead of using the element selector, you just need to change your HTML tags without having to change your CSS.

Not recommended

P.content > Header.content-header > H2.title {  font-size:2em;}

Recommended

. Content >. content-header >. title {  Font-size:2em;}

as accurate as possible.

Many front-end developers do not use direct sub-selectors when writing selector chains (note: The difference between a direct child selector and a descendant selector).
Sometimes this can lead to pain in design problems and can sometimes be very costly to perform.
However, in any case, this is a very bad practice.
If you do not write very generic and need to match the selector to the end of the DOM, you should always consider the direct child selector.

Consider the following DOM:

<article class= "Content news-content" >  <span class= "title" >news event</span> <p class=  "Content-body" >    <p class= "title Content-title" >      Check this out    </p>     <p>this A news article content</p>     <p class= "Teaser" >      <p class= "title" >buy this</p>      < P class= "Teaser-content" >Yey!</p>    </p>  </p></article>

The following CSS will be applied to all three elements that have the title class.
Then, to resolve the different styles under the title class under the content class and under the teaser class, this would require a more precise selector to rewrite their style again.

Not recommended

. Content. title {  Font-size:2rem;}

Recommended

. Content >. title {  Font-size:2rem;}. Content >. content-body >. title {  Font-size:1.5rem;}. Content &G t;. content-body >. teaser >. title {  Font-size:1.2rem;}

abbreviation attribute

CSS provides a variety of abbreviation properties (such as font fonts) that should be used whenever possible, even if 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;

Recommended

CSS code:

border-top:0;font:100%/1.6 Palatino, Georgia, serif;padding:0 1em 2em;

0 and units

Omit the units after the value "0". Do not use units after the 0 value, unless there is a value.
Not recommended

CSS code:

Padding-bottom:0px;margin:0em;

Recommended

CSS code:

padding-bottom:0;margin:0;

Hexadecimal notation

If possible, use a 3-character hexadecimal notation.
Color values allow this representation,
A 3-character hexadecimal notation is shorter.

Always use lowercase hexadecimal digits.

Not recommended

Color: #FF33AA;

Recommended

Color: #f3a;

Delimiter for ID and class name

Use hyphens (dashes) to separate the words in the ID and class (class) names. To enhance lesson comprehension, do not use any characters (including none) in the selector to connect words and abbreviations, except for hyphens (dashes).

In addition, as the standard, the preset attribute selector recognizes hyphens (dashes) as delimiters of the word [attribute|=value],
So it's best to stick with hyphens as delimiters.

Not recommended

. demoimage {}.error_status {}

Recommended

#video-id {}.ads-sample {}

Hacks

Avoid user agent detection and CSS "hacks" – Try different methods first. With user agent detection or special CSS filters, workarounds and hacks can easily resolve style differences. Both methods should be considered as the last resort in order to achieve and maintain an effective and manageable code base. In other words, in the long run, user agent detection and hacks
Will hurt the project, as the project often should take the path of least resistance. In other words, it is easy to allow user agent detection and hacks to be too frequent later.

Declaration Order

This is the approximate outline of the order in which CSS attributes are written in a selector. This is to ensure better readability and scanning is important.

As a best practice, we should follow the following order (which should be in the order of the following table):

Structural Properties:
Display
Position, left, top, right etc.
Overflow, float, clear etc.
Margin, padding
Performance attributes:
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;}

Recommended

. 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 declaration

To ensure consistency and extensibility, each declaration should end with a semicolon, with each declaration wrapped.

Not recommended

CSS code:. Test {  display:block; height:100px}

Recommended

CSS code:

. test {  display:block;  height:100px;}

Property name End

Use a space after the colon of the property name. For reasons of consistency,
A space is always used between the property and the value (but no space between the property and the colon).

Not recommended

CSS code:

h3 {  font-weight:bold;}

Recommended

CSS code: h3 {  font-weight:bold;}

Selector and declaration separation

Each selector and attribute declaration always uses a new row.

Not recommended

CSS code:

A:focus, a:active {  position:relative; top:1px;}

Recommended

CSS code:

h1,h2,h3 {  font-weight:normal;  line-height:1.2;}

Rule delimited

There is always a blank line between the rules (double line breaks) separated.

Recommended

CSS code:

HTML {  background: #fff;} body {  margin:auto;  width:50%;}

CSS Quotes

The property selector or property value is enclosed in double quotation marks ("") instead of single quotation marks (").
URI value (URL ()) Do not use quotation marks.

Not recommended

CSS code:

@import url ('//cdn.com/foundation.css '); HTML {  font-family: ' Open sans ', Arial, Sans-serif;} body:after {  content: ' Pause ';}

Recommended

CSS code:

@import URL (//cdn.com/foundation.css); HTML {  font-family: "Open sans", Arial, Sans-serif;} body:after {  content: "Pause";}

Selector nesting (SCSS)

You can nest selectors in sass, which makes your code cleaner and readable. Nesting all selectors, but try to avoid nesting selectors without any content.
If you need to specify the style attributes of some child elements, and the parent element will not have any style attributes,
You can use the regular CSS selector chain.
This will prevent your script from looking overly complex.

Not recommended

CSS code:

Not a good example by does making use of the 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 are no attributes and use selector chains Instea d.content {  display:block;   >. news-article {    >. title {      font-size:1.2em;    }}  }

Recommended

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;  }}

Inserting empty rows into a nested (SCSS)

An empty line between the nested selector and the CSS property.

Not recommended

CSS code:

. content {  display:block;  >. news-article {    background-color: #eee;    >. title {      font-size:1.2em;    }    >. article-footnote {      font-size:0.8em;}}  }

Recommended

CSS code:

. content {  display:block;   >. news-article {    background-color: #eee;     >. title {      font-size:1.2em;    }     >. article-footnote {      font-size:0.8em;}}  }

Contextual media queries (SCSS)

In sass, you can also use context media queries when you nest your selectors.
In sass, you can use media queries in any given nesting hierarchy.
The resulting CSS will be converted so that the media query renders the package selector.

This technique is very convenient,
Helps maintain the context in which the media query belongs.

The first way this allows you to write your phone's style first, and then wherever you need it
Query with context media to provide a desktop style.

Not recommended

CSS code:

This mobile first example looks like plain CSS where the whole structure of SCSS are repeated//on the bottom in a media Query. This is the error prone and makes maintenance harder as it's not so easy-to-relate//the content in the media query to the con Tent 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;}}  }

Recommended

CSS code:

This was the same example as above but here we use contextual media queries in order to put the different styles//for D Ifferent 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 selector (SCSS)

When using the nested function of sass,
It is important to have a definite nesting order,
The following is the order in which a scss block should be.

Style properties for the current selector
Pseudo-class selector for parent selector (: first-letter,: hover,: Active etc)
Pseudo-Class elements (: Before And:after)
The declaration style of the parent selector (. selected,. Active,. Enlarged etc.)
Query with SASS Context Media
Child selector as the last part
The following example should illustrate how this ordering would achieve a clear structure while making use of the Sass pare NT Selector.

Recommended

CSS code:

. product-teaser {//1.  Style attributes Display:inline-block;  Padding:1rem;  Background-color:whitesmoke;   Color:grey; 2.  Pseudo selectors with parent selector &:hover {color:black; }//3.    Pseudo elements with parent selector &:before {content: "";    Display:block;  BORDER-TOP:1PX solid Grey;    } &:after {content: "";    Display:block;  BORDER-TOP:1PX solid Grey; }//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; }  }}