CSS and SAS (SCSS) specifications

Keywords: Attribute sass Mobile

CSS and Sass (SCSS) style rules

ID and class naming

ID and class (class) names always use names that reflect the purpose and purpose of elements, or other generic names. Instead of appearances and obscure names.

Names that reflect the purpose of the element should be preferred because they are the most understandable and least likely to change.

Common names are just alternate names for multiple elements, and their sibling elements are the same, with no special significance.
To distinguish them and make them special, they usually need to be "helpers".

Although the semanticization of class names and ID s has little practical significance for computer parsing,
Semantic names are usually the right choice because they represent information meaning and do not contain performance constraints.

Not recommended


css Code:

    

  1. 
.fw-800 {

    2. 

  2. 
  font-weight: 800;

    3. 

  3. }
    4. 

  4.  
    5. 

  5. 
.red {

    6. 

  6. 
  color: red;

    7. 

  7. }
    8.

Recommend


css Code:

    

  1. 
.heavy {

    2. 

  2. 
  font-weight: 800;

    3. 

  3. }
    4. 

  4.  
    5. 

  5. 
.important {

    6. 

  6. 
  color: red;

    7. 

  7. }
    8.

Reasonable Avoidance of ID Use

In general, ID s should not be applied to styles.
The ID style cannot be reused and you can only use the ID once per page.
The only valid way to use ID is to locate the page or the entire site.
Nevertheless, you should always consider using class, not id, unless you use it only once.

Not recommended


css Code:

    

  1. 
#content .title {

    2. 

  2. 
  font-size: 2em;

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
.content .title {

    2. 

  2. 
  font-size: 2em;

    3. 

  3. }
    4.

Another objection to the use of ID is the high weight of ID selectors.
A selector containing only one ID selector weighs more than a selector containing 1000 class (class) names, which makes it strange.


css Code:

    

  1. 
// This selector weights higher than the following selector

    2. 

  2. 
#content .title {

    3. 

  3. 
  color: red;

    4. 

  4. }
    5. 

  5.  
    6. 

  6. 
// than this selector!

    7. 

  7. 
html body div.content.news-content .title.content-title.important {

    8. 

  8. 
  color: blue;

    9. 

  9. }
    10.

Avoid label names in CSS selectors

Clear, accurate and semantic class (class) names should be used when building selectors. Do not use label selectors. If you only care about your class name
Instead of your code elements, it's easier to maintain.

From the standpoint 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 list, or that a div will be converted to article.
If you only use class (class) names that have practical meaning,
And without using element selectors, you just need to change your html tags, not your CSS.

Not recommended


css Code:

    

  1. 
div.content > header.content-header > h2.title {

    2. 

  2. 
  font-size: 2em;

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
.content > .content-header > .title {

    2. 

  2. 
  font-size: 2em;

    3. 

  3. }
    4.

Be as accurate as possible

Many front-end developers write selector chains without using direct sub-selectors (note: the difference between direct sub-selectors and descendant selectors).
Sometimes, this can lead to painful design problems and sometimes can be performance-intensive.
However, in any case, this is a very bad practice.
If you don't write very generic selectors that need to match to the DOM end, you should always consider direct sub-selectors.

Consider the following DOM:


css Code:

    

  1. 
<article class="content news-content">

    2. 

  2. 
  <span class="title">News event</span>

    3. 

  3. 
  <div class="content-body">

    4. 

  4. 
    <div class="title content-title">

    5. 

  5.       Check this out
    6. 

  6. 
    </div>

    7. 

  7.  
    8. 

  8. 
    <p>This is a news article content</p>

    9. 

  9.  
    10. 

  10. 
    <div class="teaser">

    11. 

  11. 
      <div class="title">Buy this</div>

    12. 

  12. 
      <div class="teaser-content">Yey!</div>

    13. 

  13. 
    </div>

    14. 

  14. 
  </div>

    15. 

  15. 
</article>

    16.

The following CSS will apply to all three elements of the 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 a more precise selector to rewrite their styles again.

Not recommended


css Code:

    

  1. 
.content .title {

    2. 

  2. 
  font-size: 2rem;

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
.content > .title {

    2. 

  2. 
  font-size: 2rem;

    3. 

  3. }
    4. 

  4.  
    5. 

  5. 
.content > .content-body > .title {

    6. 

  6. 
  font-size: 1.5rem;

    7. 

  7. }
    8. 

  8.  
    9. 

  9. 
.content > .content-body > .teaser > .title {

    10. 

  10. 
  font-size: 1.2rem;

    11. 

  11. }
    12.

Abbreviated attribute

CSS provides various abbreviation attributes (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:

    

  1. 
border-top-style: none;

    2. 

  2. 
font-family: palatino, georgia, serif;

    3. 

  3. 
font-size: 100%;

    4. 

  4. 
line-height: 1.6;

    5. 

  5. 
padding-bottom: 2em;

    6. 

  6. 
padding-left: 1em;

    7. 

  7. 
padding-right: 1em;

    8. 

  8. 
padding-top: 0;

    9.

Recommend


css Code:

    

  1. 
border-top: 0;

    2. 

  2. 
font: 100%/1.6 palatino, georgia, serif;

    3. 

  3. 
padding: 0 1em 2em;

    4.

0 And unit

The unit after the value of "0" is omitted. Do not use units after zero unless they have value.

Not recommended


css Code:

    

  1. 
padding-bottom: 0px;

    2. 

  2. 
margin: 0em;

    3.

Recommend


css Code:

    

  1. 
padding-bottom: 0;

    2. 

  2. 
margin: 0;

    3.

Hexadecimal representation

Where possible, use a hexadecimal representation of three characters.
The color values are allowed to be expressed in this way.
The hexadecimal representation of three characters is shorter.

Always use lowercase hexadecimal digits.

Not recommended


css Code:

  1. 
color: #FF33AA;

Recommend


css Code:

  1. 
color: #f3a;

ID Separator for Class Name and Class Name

Use hyphens to separate words in ID and Class names. In order to enhance the comprehension of the lesson, do not use any characters (including none) in the selector except hyphens (underlines) to connect words and abbreviations.

In addition, as a standard, the default attribute selector recognizes hyphens (medians) as separators for words [attribute|=value].
So it's best to stick to hyphens as separators.

Not recommended


css code:

    

  1. 
.demoimage {}

    2. 

  2. 
.error_status {}

    3.

Recommend


css Code:

    

  1. 
#video-id {}

    2. 

  2. 
.ads-sample {}

    3.

Hacks

Avoid user agent detection and CSS "hacks" - try different approaches first. Through user agent detection or special CSS filters, flexible methods and hacks can easily solve style differences. In order to achieve and maintain an effective and manageable code base, both methods should be considered as the last resort. In other words, in the long run, user agent detection and hacks
It will hurt the project. As a project, it should take the path of least resistance. That is to say, user agent detection and hacks will be too frequent in the future.

Declaration order

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

As best practices, we should follow the following order (in the following order):

  1. Structural attributes:
    1. display
    2. position, left, top, right etc.
    3. overflow, float, clear etc.
    4. margin, padding
  2. Expressive attributes:
    1. background, border etc.
    2. font, text

Not recommended


css Code:

    

  1. 
.box {

    2. 

  2. 
  font-family: 'Arial', sans-serif;

    3. 

  3. 
  border: 3px solid #ddd;

    4. 

  4. 
  left: 30%;

    5. 

  5. 
  position: absolute;

    6. 

  6. 
  text-transform: uppercase;

    7. 

  7. 
  background-color: #eee;

    8. 

  8. 
  right: 30%;

    9. 

  9. 
  isplay: block;

    10. 

  10. 
  font-size: 1.5rem;

    11. 

  11. 
  overflow: hidden;

    12. 

  12. 
  padding: 1em;

    13. 

  13. 
  margin: 1em;

    14. 

  14. }
    15.

Recommend


css Code:

    

  1. 
.box {

    2. 

  2. 
  display: block;

    3. 

  3. 
  position: absolute;

    4. 

  4. 
  left: 30%;

    5. 

  5. 
  right: 30%;

    6. 

  6. 
  overflow: hidden;

    7. 

  7. 
  margin: 1em;

    8. 

  8. 
  padding: 1em;

    9. 

  9. 
  background-color: #eee;

    10. 

  10. 
  border: 3px solid #ddd;

    11. 

  11. 
  font-family: 'Arial', sans-serif;

    12. 

  12. 
  font-size: 1.5rem;

    13. 

  13. 
  text-transform: uppercase;

    14. 

  14. }
    15.

Statement ends

To ensure consistency and scalability, each declaration should end with a semicolon and each declaration should be newline.

Not recommended


css Code:

    

  1. 
.test {

    2. 

  2. 
  display: block; height: 100px

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
.test {

    2. 

  2. 
  display: block;

    3. 

  3. 
  height: 100px;

    4. 

  4. }
    5.

End of property name

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

Not recommended


css Code:

    

  1. 
h3 {

    2. 

  2. 
  font-weight:bold;

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
h3 {

    2. 

  2. 
  font-weight: bold;

    3. 

  3. }
    4.

Separation of selector and declaration

Each selector and attribute declaration always uses a new line.

Not recommended


css Code:

    

  1. 
a:focus, a:active {

    2. 

  2. 
  position: relative; top: 1px;

    3. 

  3. }
    4.

Recommend


css Code:

    

  1. 
h1,

    2. 

  2. 
h2,

    3. 

  3. 
h3 {

    4. 

  4. 
  font-weight: normal;

    5. 

  5. 
  line-height: 1.2;

    6. 

  6. }
    7.

Rule separation

There is always a blank line (double newline character) separation between rules.

Recommend


css Code:

    

  1. 
html {

    2. 

  2. 
  background: #fff;

    3. 

  3. }
    4. 

  4.  
    5. 

  5. 
body {

    6. 

  6. 
  margin: auto;

    7. 

  7. 
  width: 50%;

    8. 

  8. }
    9.

CSS quotation marks

Property selectors or attribute values are enclosed in double quotes ("), rather than single quotes (").
Do not use quotation marks for URI values (url()).

Not recommended


css Code:

    

  1. 
@import url('//cdn.com/foundation.css');

    2. 

  2.  
    3. 

  3. 
html {

    4. 

  4. 
  font-family: 'open sans', arial, sans-serif;

    5. 

  5. }
    6. 

  6.  
    7. 

  7. 
body:after {

    8. 

  8. 
  content: 'pause';

    9. 

  9. }
    10.

Recommend


css Code:

    

  1. 
@import url(//cdn.com/foundation.css);

    2. 

  2.  
    3. 

  3. 
html {

    4. 

  4. 
  font-family: "open sans", arial, sans-serif;

    5. 

  5. }
    6. 

  6.  
    7. 

  7. 
body:after {

    8. 

  8. 
  content: "pause";

    9. 

  9. }
    10.

Selector nesting (SCSS)

In SAS, you can nest selectors, which can make the code cleaner and more readable. Nested all selectors, but try to avoid nesting selectors without any content.
If you need to specify style attributes for some child elements, the parent element will have no style attributes.
Conventional CSS selector chains can be used.
This will prevent your script from looking too complex.

Not recommended


css Code:

    

  1. 
// Not a good example by not making use of nesting at all

    2. 

  2. 
.content {

    3. 

  3. 
  display: block;

    4. 

  4. }
    5. 

  5.  
    6. 

  6. 
.content > .news-article > .title {

    7. 

  7. 
  font-size: 1.2em;

    8. 

  8. }
    9.

Not recommended


css Code:

    

  1. 
// Using nesting is better but not in all cases

    2. 

  2. 
// Avoid nesting when there is no attributes and use selector chains instead

    3. 

  3. 
.content {

    4. 

  4. 
  display: block;

    5. 

  5.  
    6. 

  6. 
  > .news-article {

    7. 

  7. 
    > .title {

    8. 

  8. 
      font-size: 1.2em;

    9. 

  9. 
    }

    10. 

  10. 
  }

    11. 

  11. }
    12.

Recommend


css Code:

    

  1. 
// This example takes the best approach while nesting but use selector chains where possible

    2. 

  2. 
.content {

    3. 

  3. 
  display: block;

    4. 

  4.  
    5. 

  5. 
  > .news-article > .title {

    6. 

  6. 
    font-size: 1.2em;

    7. 

  7. 
  }

    8. 

  8. }
    9.

Introducing into nesting Air Line (SCSS)

An empty line between nested selectors and CSS attributes.

Not recommended


css Code:

    

  1. 
.content {

    2. 

  2. 
  display: block;

    3. 

  3. 
  > .news-article {

    4. 

  4. 
    background-color: #eee;

    5. 

  5. 
    > .title {

    6. 

  6. 
      font-size: 1.2em;

    7. 

  7. 
    }

    8. 

  8. 
    > .article-footnote {

    9. 

  9. 
      font-size: 0.8em;

    10. 

  10. 
    }

    11. 

  11. 
  }

    12. 

  12. }
    13.

Recommend


css Code:

    

  1. 
.content {

    2. 

  2. 
  display: block;

    3. 

  3.  
    4. 

  4. 
  > .news-article {

    5. 

  5. 
    background-color: #eee;

    6. 

  6.  
    7. 

  7. 
    > .title {

    8. 

  8. 
      font-size: 1.2em;

    9. 

  9. 
    }

    10. 

  10.  
    11. 

  11. 
    > .article-footnote {

    12. 

  12. 
      font-size: 0.8em;

    13. 

  13. 
    }

    14. 

  14. 
  }

    15. 

  15. }
    16.

Context Media Query (SCSS)

In SAS, you can also use context media to query when you nest your selectors.
In SAS, you can use media queries at any given nested level.
The resulting CSS will be transformed, and such media queries will be presented in the form of package selectors.

This technology is very convenient.
Helps maintain the context in which media queries belong.

The first method allows you to write your phone style first and then anywhere you need it.
Use context media queries to provide desktop style.

Not recommended


css Code:

    

  1. 
// This mobile first example looks like plain CSS where the whole structure of SCSS is repeated

    2. 

  2. 
// on the bottom in a media query. This is error prone and makes maintenance harder as it's not so easy to relate

    3. 

  3. 
// the content in the media query to the content in the upper part (mobile style)

    4. 

  4.  
    5. 

  5. 
.content-page {

    6. 

  6. 
  font-size: 1.2rem;

    7. 

  7.  
    8. 

  8. 
  > .main {

    9. 

  9. 
    background-color: whitesmoke;

    10. 

  10.  
    11. 

  11. 
    > .latest-news {

    12. 

  12. 
      padding: 1rem;

    13. 

  13.  
    14. 

  14. 
      > .news-article {

    15. 

  15. 
        padding: 1rem;

    16. 

  16.  
    17. 

  17. 
        > .title {

    18. 

  18. 
          font-size: 2rem;

    19. 

  19. 
        }

    20. 

  20. 
      }

    21. 

  21. 
    }

    22. 

  22.  
    23. 

  23. 
    > .content {

    24. 

  24. 
      margin-top: 2rem;

    25. 

  25. 
      padding: 1rem;

    26. 

  26. 
    }

    27. 

  27. 
  }

    28. 

  28.  
    29. 

  29. 
  > .page-footer {

    30. 

  30. 
    margin-top: 2rem;

    31. 

  31. 
    font-size: 1rem;

    32. 

  32. 
  }

    33. 

  33. }
    34. 

  34.  
    35. 

  35. 
@media screen and (min-width: 641px) {

    36. 

  36. 
  .content-page {

    37. 

  37. 
    font-size: 1rem;

    38. 

  38.  
    39. 

  39. 
    > .main > .latest-news > .news-article > .title {

    40. 

  40. 
      font-size: 3rem;

    41. 

  41. 
    }

    42. 

  42.  
    43. 

  43. 
    > .page-footer {

    44. 

  44. 
      font-size: 0.8rem;

    45. 

  45. 
    }

    46. 

  46. 
  }

    47. 

  47. }
    48.

Recommend


css Code:

    

  1. 
// This is the same example as above but here we use contextual media queries in order to put the different styles

    2. 

  2. 
// for different media into the right context.

    3. 

  3.  
    4. 

  4. 
.content-page {

    5. 

  5. 
  font-size: 1.2rem;

    6. 

  6.  
    7. 

  7. 
  @media screen and (min-width: 641px) {

    8. 

  8. 
    font-size: 1rem;

    9. 

  9. 
  }

    10. 

  10.  
    11. 

  11. 
  > .main {

    12. 

  12. 
    background-color: whitesmoke;

    13. 

  13.  
    14. 

  14. 
    > .latest-news {

    15. 

  15. 
      padding: 1rem;

    16. 

  16.  
    17. 

  17. 
      > .news-article {

    18. 

  18. 
        padding: 1rem;

    19. 

  19.  
    20. 

  20. 
        > .title {

    21. 

  21. 
          font-size: 2rem;

    22. 

  22.  
    23. 

  23. 
          @media screen and (min-width: 641px) {

    24. 

  24. 
            font-size: 3rem;

    25. 

  25. 
          }

    26. 

  26. 
        }

    27. 

  27. 
      }

    28. 

  28. 
    }

    29. 

  29.  
    30. 

  30. 
    > .content {

    31. 

  31. 
      margin-top: 2rem;

    32. 

  32. 
      padding: 1rem;

    33. 

  33. 
    }

    34. 

  34. 
  }

    35. 

  35.  
    36. 

  36. 
  > .page-footer {

    37. 

  37. 
    margin-top: 2rem;

    38. 

  38. 
    font-size: 1rem;

    39. 

  39.  
    40. 

  40. 
    @media screen and (min-width: 641px) {

    41. 

  41. 
      font-size: 0.8rem;

    42. 

  42. 
    }

    43. 

  43. 
  }

    44. 

  44. }
    45.

Nested Sequence and Parent Selector (SCSS)

When using Sass's nesting function,
It is important to have a clear nesting order.
The following is the order in which an SCSS block should have.

  1. Style properties of the current selector
  2. Pseudo-class selectors for parent selectors (: first-letter,: hover,: active etc)
  3. Pseudo-class elements (: before and: after)
  4. The declaration style of the parent selector (.selected,.active,.enlarged etc.)
  5. Query with Sass's Context Media
  6. Subselector as the last part

The following example should illustrate how this ordering will achieve a clear structure while making use of the Sass parent selector.

Recommended


css Code:

    

  1. 
.product-teaser {

    2. 

  2. 
  // 1. Style attributes

    3. 

  3. 
  display: inline-block;

    4. 

  4. 
  padding: 1rem;

    5. 

  5. 
  background-color: whitesmoke;

    6. 

  6. 
  color: grey;

    7. 

  7.  
    8. 

  8. 
  // 2. Pseudo selectors with parent selector

    9. 

  9. 
  &:hover {

    10. 

  10. 
    color: black;

    11. 

  11. 
  }

    12. 

  12.  
    13. 

  13. 
  // 3. Pseudo elements with parent selector

    14. 

  14. 
  &:before {

    15. 

  15. 
    content: "";

    16. 

  16. 
    display: block;

    17. 

  17. 
    border-top: 1px solid grey;

    18. 

  18. 
  }

    19. 

  19.  
    20. 

  20. 
  &:after {

    21. 

  21. 
    content: "";

    22. 

  22. 
    display: block;

    23. 

  23. 
    border-top: 1px solid grey;

    24. 

  24. 
  }

    25. 

  25.  
    26. 

  26. 
  // 4. State classes with parent selector

    27. 

  27. 
  &.active {

    28. 

  28. 
    background-color: pink;

    29. 

  29. 
    color: red;

    30. 

  30.  
    31. 

  31. 
    // 4.2. Pseuso selector in state class selector

    32. 

  32. 
    &:hover {

    33. 

  33. 
      color: darkred;

    34. 

  34. 
    }

    35. 

  35. 
  }

    36. 

  36.  
    37. 

  37. 
  // 5. Contextual media queries

    38. 

  38. 
  @media screen and (max-width: 640px) {

    39. 

  39. 
    display: block;

    40. 

  40. 
    font-size: 2em;

    41. 

  41. 
  }

    42. 

  42.  
    43. 

  43. 
  // 6. Sub selectors

    44. 

  44. 
  > .content > .title {

    45. 

  45. 
    font-size: 1.2em;

    46. 

  46.  
    47. 

  47. 
    // 6.5. Contextual media queries in sub selector

    48. 

  48. 
    @media screen and (max-width: 640px) {

    49. 

  49. 
      letter-spacing: 0.2em;

    50. 

  50. 
      text-transform: uppercase;

    51. 

  51. 
    }

    52. 

  52. 
  }

    53. 

  53. }
    54.

Posted by Peredy on Mon, 08 Apr 2019 00:51:32 -0700

Hot Keywords

©2024 Programmer Group