This is the 14th day of my participation in the More text Challenge. For more details, see more text Challenge

The problem of CSS

1, global namespace, every style can be overridden or redefined (cSS4-scope attribute) 2, difficult to manage dependencies 3, difficult to eliminate dead code, before the actual operation, can not determine whether a particular CSS will be used 4, difficult to share variables, especially between CSS and JS 5, difficult to compress, Limited minify effects 6, nondeterministic styles (asynchronous loading order of CSS files can affect final style rendering) 7, difficult to isolate components (except shadow-dom and Scope properties) 8, complex and confusing selector priority operations 9, no support for abstraction and reuse

The goal of CSS

  • Greatly improved maintainability
  • Ensures code quality and reduces the risk of CSS conflicts
  • Greatly reduces the cost of understanding and maintaining other people’s CSS code
  • Greatly improve the development efficiency
  • Improving CSS Performance
  • Reduce the size of the CSS file
  • Think semantically where possible
  • Consider accessibility whenever possible

Our goals are:

No matter how many contributors there are, every line of our code should look like it was written by one person

The “cascading” style

1. Simple version

#sidebar ul li a.myclass:hover{}
Copy the code
inline IDs classes

(& pseudo classes & attributes)		 elements

(& pseudo elements)
0 1 2 3

Wildcard selectors

* {}
Copy the code
inline IDs classes

(& pseudo classes & attributes)		 elements

(& pseudo elements)
0 0 0 0

3, connection

.item{color:blue; } ul li li li li li li li li li {color: red; }Copy the code
inline IDs classes

(& pseudo classes & attributes)		 elements

(& pseudo elements)
0 0 1 0
0 0 0 10

4, labels,

h1{color: #333; font-size: 24px; font-weight: bold; } h2{color: #333; font-size: 19px; font-weight: bold; } h3{color: #333; font-size: 17px; font-weight: bold; } h4{color: #333; font-size: 15px; font-weight: bold; } h5{color: #111; font-size: 13px; font-weight: bold; } h6{color: #111; font-size: 12px; font-weight: bold; }Copy the code
inline IDs classes

(& pseudo classes & attributes)		 elements

(& pseudo elements)
0 0 0 1

Think about 1

So let’s think about this: How do I make H3 look different up here? (But only in sidebar and semantically appropriate.)

As follows:

h1{color: #333; font-size: 24px; font-weight: bold; } h2{color: #333; font-size: 19px; font-weight: bold; } #sidebar h3{ color: #797979; font-size: 12px; font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; } h4{color: #333; font-size: 15px; font-weight: bold; } h5{color: #111; font-size: 13px; font-weight: bold; } h6{color: #111; font-size: 12px; font-weight: bold; }Copy the code

Then your designer gives you a new look:

Then we add it to the stylesheet:

h1{color: #333; font-size: 24px; font-weight: bold; } h2{color: #333; font-size: 19px; font-weight: bold; } #sidebar h3{ color: #797979; font-size: 12px; font-weight: bold; border-bottom: 1px solid #c5c5c5; padding-bottom: 5px; } #sidebar .account h3 { color: #555; font-size: 13px; font-weight: bold; background-color: #deeef8; padding: 5px; margin: 10px 0; } h4{color: #333; font-size: 15px; font-weight: bold; } h5{color: #111; font-size: 13px; font-weight: bold; } h6{color: #111; font-size: 12px; font-weight: bold; }Copy the code

Thinking about 2

Suppose you have a weather module in the sidebar

#sidebar .weatherMod h3 {
    color: #fff;
    text-transform: uppercase;
}
Copy the code

Then the designer decided that the day title needed to be bold and red.

// 0  1  1  1
#sidebar .weatherMod h3{}

// 0  1  2  1
#sidebar .weatherMod .hourly h3{}
Copy the code

After a few days, the above requirements were finally completed:

// 1 0 0 0 <h3 style="color: red; font-weight: bold; font-size: 20px;" >my shiny new heading level 3</h3>Copy the code

Looking at the code above, you can see that there is no way to override the above rule, and then we think that using inline is not very good, but what choice do we have left? Then you think: Maybe we can use it! important

// 0 1 3 1 0 0 0 0 #sidebar .weatherMod .hourly .tueaday h3 { color: blue ! important; }Copy the code

However use! Important is a bad habit, a bad way to write it, and should be avoided as much as possible because it breaks the cascading rules inherent in the stylesheet, making it more difficult to modal.

The priority relationship in the style sheet looks like this:

On performance

CSS selectors always match from right to left; The rightmost selector matches as few elements as possible.

So let’s stop there for today, and tomorrow we’ll talk about traditional methodology and modern methodology.