CSS Code Optimization Chapter

The mood is not very good, do not want to say what

The code demonstrates the following:

Not recommended

1. . fw-800 {
2. font-weight:800;
3. }
5. . Red {
6. color:red;
7. }

Recommended

1. . Heavy {
2. font-weight:800;
3. }
5. . Important {
6. color:red;
7. }

  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

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

Recommended

1. . Content. Title {
2. Font-size:2em;
3. }

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.

1. This selector is weighted higher than the selector below
2. #content. title {
3. color:red;
4. }
6. than this selector!
7. HTML body div.content.news-content. title.content-title.important {
8. Color:blue;
9. }

  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 DIV 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

1. Div.content > Header.content-header > H2.title {
2. Font-size:2em;
3. }

Recommended

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

  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:

1. <article class= "Content news-content" >
2. <span class= "title" >news event</span>
3. <div class= "Content-body" >
4. <div class= "title Content-title" >
5. Check this out
6. </div>
8. <p>this is a news article content</p>
10. <div class= "Teaser" >
11. <div class= "title" >buy this</div>
12. <div class= "Teaser-content" >Yey!</div>
13. </div>
14. </div>
15. </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

1. . Content. Title {
2. Font-size:2rem;
3. }

Recommended

1. . Content >. title {
2. Font-size:2rem;
3. }
5. . Content >. content-body >. title {
6. Font-size:1.5rem;
7. }
9. . Content >. content-body >. teaser >. title {
10. Font-size:1.2rem;
11. }

  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

1. Border-top-style:none;
2. Font-family:palatino, Georgia, serif;
3. font-size:100%;
4. line-height:1.6;
5. Padding-bottom:2em;
6. Padding-left:1em;
7. Padding-right:1em;
8. padding-top:0;

Recommended

1. border-top:0;
2. font:100%/1.6 Palatino, Georgia, serif;
3. 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

1. padding-bottom:0px;
2. Margin:0em;

Recommended

1. padding-bottom:0;
2. 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

1. Color: #FF33AA;

Recommended

1. Color: #f3a; Note lowercase

  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

1. . Demoimage {}//camel-named or conjunctions
2. . Error_status {}//Do not use underscores

Recommended

1. #video-id {}
2. . 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):

1. Structural Properties:
   1. Display
   2. Position, left, top, right etc.
   3. Overflow, float, clear etc.
   4. Margin, padding
2. Performance attributes:
   1. background, Border etc.
   2. Font, text

Not recommended

1. . box {
2. font-family: ' Arial ', Sans-serif;
3. BORDER:3PX solid #ddd;
4. left:30%;
5. Position:absolute;
6. Text-transform:uppercase;
8. right:30%;
9. Isplay:block;
10. Font-size:1.5rem;
11. Overflow:hidden;
12. Padding:1em;
13. Margin:1em;
14. }

Recommended

1. . box {
2. Display:block;
3. Position:absolute;
4. left:30%;
5. right:30%;
6. Overflow:hidden;
7. Margin:1em;
8. Padding:1em;
10. BORDER:3PX solid #ddd;
11. font-family: ' Arial ', Sans-serif;
12. Font-size:1.5rem;
13. Text-transform:uppercase;
14. }

  End of Declaration

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

Not recommended

1. . Test {
2. Display:block; height:100px
3. }

Recommended

1. . Test {
2. Display:block;
3. height:100px;
4. }

  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

1. h3 {
2. Font-weight:bold;
3. }

Recommended

1. h3 {
2. Font-weight:bold;
3. }

  selector and declaration separation

Each selector and attribute declaration always uses a new row.

Not recommended

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

Recommended

1. H1,
2. H2,
3. h3 {
4. Font-weight:normal;
5. line-height:1.2;
6. }

  Rule Delimited

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

Recommended

1. HTML {
2. Background: #fff;
3. }
5. Body {
6. Margin:auto;
7. width:50%;
8. }

  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

1. @import url ('//cdn.com/foundation.css ');
3. HTML {
4. font-family: ' Open sans ', Arial, Sans-serif;
5. }
7. Body:after {
8. Content: ' Pause ';
9. }

Recommended

1. @import URL (//cdn.com/foundation.css);
3. HTML {
4. font-family: "Open sans", Arial, Sans-serif;
5. }
7. Body:after {
8. Content: "Pause";
9. }

  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

1. Not a good example by does making use of nesting @ all
2. . Content {
3. Display:block;
4. }
6. . Content >. news-article >. title {
7. Font-size:1.2em;
8. }

Not recommended

1. Using nesting is better and not at all cases
2. Avoid nesting when there are no attributes and use selector chains instead
3. . Content {
4. Display:block;
6. >. news-article {
7. >. title {
8. Font-size:1.2em;
9. }
10. }
11. }

Recommended

1. This example takes, the best approach while nesting, and use selector chains where possible
2. . Content {
3. Display:block;
5. >. news-article >. title {
6. Font-size:1.2em;
7. }
8. }

  inserting empty rows into a nested (SCSS)

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

Not recommended

1. . Content {
2. Display:block;
3. >. news-article {
5. >. title {
6. Font-size:1.2em;
7. }
8. >. article-footnote {
9. Font-size:0.8em;
10. }
11. }
12. }

Recommended

1. . Content {
2. Display:block;
4. >. news-article {
7. >. title {
8. Font-size:1.2em;
9. }
11. >. article-footnote {
12. Font-size:0.8em;
13. }
14. }
15. }

  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

2. This mobile first example looks like plain CSS where the whole structure of SCSS are repeated
4. On the bottom in a media query. This is the error prone and makes maintenance harder as it ' s not so easy to relate
6. The content in the media query to the content of the upper part (mobile style)
10. . content-page {
12. Font-size:1.2rem;
16. >. main {
22. >. latest-news {
24. Padding:1rem;
28. >. news-article {
30. Padding:1rem;
34. >. title {
36. Font-size:2rem;
38. }
40. }
42. }
46. >. content {
48. Margin-top:2rem;
50. Padding:1rem;
52. }
54. }
58. >. page-footer {
60. Margin-top:2rem;
62. Font-size:1rem;
64. }
66. }
70. @media screen and (min-width:641px) {
72. . content-page {
74. Font-size:1rem;
78. >. Main >. latest-news >. news-article >. title {
80. Font-size:3rem;
82. }
86. >. page-footer {
88. Font-size:0.8rem;
90. }
92. }
94. }

Recommended

2. This was the same example as above but here we use contextual media queries in order to put the different styles
4. For different media to the right context.
8. . content-page {
10. Font-size:1.2rem;
14. @media screen and (min-width:641px) {
16. Font-size:1rem;
18. }
22. >. main {
28. >. latest-news {
30. Padding:1rem;
34. >. news-article {
36. Padding:1rem;
40. >. title {
42. Font-size:2rem;
46. @media screen and (min-width:641px) {
48. Font-size:3rem;
50. }
52. }
54. }
56. }
60. >. content {
62. Margin-top:2rem;
64. Padding:1rem;
66. }
68. }
72. >. page-footer {
74. Margin-top:2rem;
76. Font-size:1rem;
80. @media screen and (min-width:641px) {
82. Font-size:0.8rem;
84. }
86. }
88. }

  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.

1. Style properties for the current selector
2. Pseudo-class selector for parent selector (: 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 Context Media
6. 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

2. . product-teaser {
4. 1. Style attributes
6. Display:inline-block;
8. Padding:1rem;
12. Color:grey;
16. 2. Pseudo selectors with parent selector
18. &:hover {
20. Color:black;
22. }
26. 3. Pseudo Elements with parent selector
28. &:before {
30. Content: "";
32. Display:block;
34. BORDER-TOP:1PX solid Grey;
36. }
40. &:after {
42. Content: "";
44. Display:block;
46. BORDER-TOP:1PX solid Grey;
48. }
52. 4. State classes with parent selector
54. &.active {
58. color:red;
62. 4.2. Pseuso selector in State class selector
64. &:hover {
66. color:darkred;
68. }
70. }
74. 5. Contextual Media queries
76. @media screen and (max-width:640px) {
78. Display:block;
80. Font-size:2em;
82. }
86. 6. Sub Selectors
88. >. content >. title {
90. Font-size:1.2em;
94. 6.5. Contextual media queries in sub selector
96. @media screen and (max-width:640px) {
98. Letter-spacing:0.2em;
100. Text-transform:uppercase;
102. }
104. }
106. }

Media query Usage

1. What is media query why use media queries with what it can do

Depending on the client's ring and screen hero, provide different stylesheets or just part of the style sheet in order to better display the page effect for different devices

Load different stylesheet files without modifying or rewriting CSS source code files to show bug-free page elements

1. Media types and how to use them

1), All-media type

Print-The style that is provided to the printer, the most commonly used type

Screen-Color Screens

Speech-Voice Reading

2), how to use the inline

The media query has a return value whose value is a Boolean type condition that can be manipulated when the value is false and the file is downloaded but not manipulated

<style>

@media (max-width:600px) {

. classname{

Elementsattr:value;

}

}

</style>

2), outside the chain to introduce link tags using media queries

<link rel= ' stylesheet ' media= ' (max-width:value) ' href= ' stylesheetfile.css ' >

3), set meta tags to use media queries (CSS2 notation)

<meta name= ' viewport ' content= "width=device-width,initial-scale=1,maximun-scale=1,minimum-scale=1, User-scalable=no ">

1. Media has logical operator functionality

Logical operators not, and, only can be used to construct complex media queries

and

Operator is used to combine multiple media attributes into the same media query. Media queries can be triggered only if each property is true, separated by commas

EG1: @media TV and (min-width:700px) {

Media queries are available on the TV media, and the viewable area is not less than 700 pixels

}

EG2: @media (min-width:700px), handheld and (Orientation:landscape) {

Media query on TV media, viewable area is not less than 700 pixels and is horizontal screen is effective

}

Not

Keyword to exclude devices that match an expression

Only

Prevent Uncle's browser from being applied to a given style without support for queries with media properties

Eg: <link rel= "stylesheet" media= "only screen and (color)" href= "Stylesheetfile.css"/>

/**/

CSS style sheet Inheritance properties

Azimuth

Border-collapse

Border-spacing

Caption-side

Color

Cursor

Direction

Elevation

CSS Code Optimization Chapter