Hot discussion: Why is CSS so hard to learn? You must be wrong

Hello everyone, my name is zero one . Some time ago I got this question in : 16125c05785a05 Why is CSS so difficult to learn?

After seeing this problem, I thought about it carefully. CSS seems to be very difficult to learn. It doesn’t seem to have a very systematic study outline like JavaScript. You don’t usually use all CSS, basically just use it. So a few commonly used attributes, even the introductory instructional videos of many training institutions will only teach you some commonly used CSS (otherwise you think how can a few-hour instructional video give you a quick introduction to CSS?)

Generally, people answer that CSS is easy to learn because it only uses those commonly used attributes, and he probably didn't understand it in depth. To be an exaggeration, CSS should also be considered a small language, and there are a lot of knowledge points after in-depth research. If we are not specializing in CSS, we don’t need to understand the usage of all CSS properties and the syntax of all subsequent new features. We can learn as needed according to the work scenario, but we must ensure that the properties you learn are deep enough~

So how do we learn CSS? For this, I have listed a simple outline. I want to talk about these points.

1. Books, community articles

This should be the most common way for everyone to learn CSS (and I am). There are several scenarios:

Scene One : During the development, we encountered the requirement of "display with ellipsis (...) after the number of text characters exceeded". Open Baidu search: css with too many words to display with ellipsis, eh~ found it! ctrl+c、ctrl+v , school is abandoned, finished!

Scene Two : One morning I visited the technical community and saw an article about CSS. I saw that there was a CSS property called resize title. What is the property of 06125c05785bcc, resize haven't I used it? Click in and read it with gusto~ two minutes later ~ Oh, it turns out that there is this attribute, it is used like this, the posture is up!

Scene Three : I decided, I want to learn CSS, open the shopping website to search: CSS books, quickly place an order! When the book arrived, I started reading and learning every day. Of course, there are several situations at this time, namely:

• only read the book on the first day I just got it, and it has been ash
• read a part, but was too lazy to type the code, and finally felt bored and gave up reading
• reading the book seriously, I followed the code on the book and

Regardless of the above methods, I think they are quite good. By the way, I would like to recommend a few good learning resources for everyone.

• Xinxu's blog
• Teacher Damo's W3Cplus
• iCSS coco boss

After all, standing on the shoulders of giants is the most efficient. You can spend an hour to learn the knowledge that the big guys took a day to sum up.

Two, remember the data type of CSS

Another point that CSS is more difficult to learn is probably because there are too many properties in CSS, and the value of each property supports many writing methods, so it is almost impossible to easily remember all the writing methods of each property. . Recently when I visited the blog, I discovered that CSS also has its own data types. Here is a reference to Zhang Xinxu’s CSS value type document for your convenience.

A brief introduction to the data type of CSS is like this:

The figure <> represents a CSS data type, and introduce several types in the figure:

• \<number\> : indicates that the value can be a number
• \<length\> : indicates the size and length of the element, for example, 3px , 33em , 34rem
• \<percentage\> : Represents the percentage based on the parent element, for example, 33%
• \<number-percentage\> : the value can be either \<number\> or \<percentage\>
• \<position\> : Indicates the position of the element. The value can be \<length\> , \<percentage\> , left/right/top/bottom

Look at two CSS properties:

• The first is width , the document will tell you attribute supported data types \ <length \> and \ <PERCENTAGE \> , then we know that the property has the following wording: width: 1px , width: 3rem , width: 33em , width: 33%
• The second property is background-position , the document will tell you attribute supported data types \ <position \> , then we know that the property has the following wording: background-position: left , background-position: right , background-position: top , background-position: bottom , background-position: 30% , background-position: 3rem

From this example, we can see that if you want to remember as many CSS properties as possible, you can start by remembering CSS data types (now there are almost 40+ data types), so that you learn new ones every time When CSS properties are used, the thinking will change, as shown in the figure below

did not remember the CSS data type:

Remember me who CSS data type:

I don’t know if you have found out. If the document only tells you that background-position supports the \<position\> data type, are you sure you can know the full usage of this attribute? You do know that this attribute supports background-position: 3rem , because you know that the \<position\> data type contains the \<length\> data type, but do you know that it also supports the writing of background-position: bottom 50px right 100px; Why can four values be written and separated by spaces? Who told you this?

This requires us to understand the CSS syntax , please read the next section carefully

Three, read the syntax of CSS

I had the need to use a style effect cut, so be prepared to look at CSS in clip-path property how to use, so he inquired authoritative Clip-path the MDN , I watched, I found this

I realized that I couldn't even understand the syntax of CSS . To be honest, whether you are a beginner in CSS or temporarily looking for the use of a certain CSS property, you are directly Baidu, and you can find the answer you want in an instant (such as the rookie tutorial), but this time, I am really stupid. ! because of their own clip-path this property is more complex, support for syntax will be more, just look at your sample code to MDN could not Get to the properties of all the usage and meaning (rookie can not even comprehensive tutorial to teach you)

So I followed the network cable to learn about the CSS syntax. The meaning of some symbols in

Because there is a super detailed introduction about CSS grammar symbols in CSS attribute value definition grammar MDN suggest that you must read this MDN article! Very easy to understand ), so I I won’t explain much, here are just a few summary tables.

Attribute combination symbol

Attribute combination : Represents the writing combination of multiple attribute values. For example, in border: 1px solid #000 in, 1px whether and solid interchanged, #000 can be omitted and the like, these are combinations of properties

symbol	name	effect
Space	Apposition	The order of the attributes on the left and right sides of the space cannot be interchanged
,	Comma (separator)	The attributes on both sides of the comma must be separated by a comma
/	Slash (separator)	The attributes on both sides of the slash must be separated by a slash
&&	"And" combinator	The attributes on both sides of the "and" combinator must appear, but the left and right order is arbitrary
\	\		"Or" combinator	At least one attribute appears on both sides of the "or" combinator, and the left and right order is arbitrary
\		"Mutual exclusion" combinator	Only one attribute appears on both sides of the "mutual exclusion" combinator
[]	Brackets	The content enclosed by square brackets represents a whole, which can be similar to the parentheses () in mathematics

Combinator precedence

The "and" combinator, "or" combinator, and "mutual exclusion" combinator are all used to indicate the occurrence of attribute values, but there is a priority among the three. For example, bold | thin || <length> , where the "or" combinator has a higher priority than the "mutual exclusion" combinator, so the wording is equivalent to bold | [thin || <length>]

symbol	name	Priority (the higher the number, the higher the priority)
Space	Apposition	4
&&	"And" combinator	3
\	\		"Or" combinator	2
\		"Mutual exclusion" combinator	1

Attribute repeat symbol

attribute repetition : Represents the number of occurrences of a certain attribute or certain attributes. For example, in rgba(0, 0, 0, 1) , can the number of numbers be 3, and whether the last digit can be written as a percentage. This is somewhat similar to regular repetitive symbols

symbol	name	effect
without	Don't write symbols	default. No symbol means that this attribute only appears once
+	plus	The attribute to the left of the plus sign or the whole appears one or more times
?	question mark	The attribute on the left of the question mark or the whole appears zero or one time
*	Asterisk	The attribute or the whole to the left of the asterisk appears zero or one or more times
#	hashtag	The attributes to the left of the hash sign or the whole appear one or more times, and are separated ,
{A, B}	big parantheses	The attribute on the left side of the brace or the whole appears at least A times, and at most B times
!	Exclamation mark	An attribute must appear in the whole to the left of the exclamation mark, even if all attributes in the whole are declared to appear zero times

Interpreting CSS syntax

clip-path in this section as an example, let's briefly interpret one of the attributes (only part of it will be interpreted, because it will be very long to interpret all of it)

First look at the overall structure

It is divided into four parts, the order is from top to bottom, and each two parts are where , which means where The part below is a supplementary explanation of the part above.

① : It means that the clip-path is written as: \<clip-source\> data type value, or at least \<basic-shape\> and <geometry-box\> Choose a type of value between the two to write, or none .

② : We know that the \<basic-shape\> data types in inset() : 06125c05787198, circle() , ellipse() , polygon() , path()

③ : Because we want to know circle() , we just look at this first. We know that the parameters of the circle() \<shape-radius\> and \<position\> , and both of them can be written or not, but if you want to write \<position\> , it must be preceded by a at

④ : first see \ <the Shape-the RADIUS \> supported property is \ <length-PERCENTAGE \> (the name suggests is <length> and <percentage> ), closest-side , farthest-side . The \<position\> data type seems to be more complicated. Let’s analyze it separately, because it is really very long. I will \<position\> to show it to you. It is easy for you to read (I also suggest that if you encounter such a long grammar introduction when learning the grammar of a certain attribute, format it like me, so that it is easy for you to read and understand)

As shown in the figure, the whole is divided into three parts, and these three parts are mutually exclusive, that is, only one of these three parts can appear, and then according to the symbols of the CSS syntax we learned earlier, we can know how to use it, because here There are too many supported writing methods, let me just make a table (in fact, permutation and combination)! If you still don’t understand, you can read the MDN grammar introduction carefully or you can leave a message in the comment area to ask me, I will reply as soon as I see it!

\<position\> type supported writing

first part	the second part	the third part
left	left	left 30px top 30px or top 30px left 30px
center	center	left 30px top 30% or top 30% left 30px
right	right	left 30px bottom 30px or bottom 30px left 30px
top	30%	left 30px bottom 30% or bottom 30% left 30px
bottom	3px or 3em or 3rem equal length value	left 30% top 30px or top 30px left 30%
left top or top left	left top	left 30% top 30% or top 30% left 30%
left center or center left	left center	left 30% bottom 30px or bottom 30px left 30%
left bottom or bottom left	left bottom	left 30% bottom 30% or bottom 30% left 30%
center center	left 30%	right 30px top 30px or top 30px right 30px
right top or top right	left 30px	right 30px top 30% or top 30% right 30px
right center or center right	center top	right 30px bottom 30px or bottom 30px right 30px
right bottom or bottom right	center center	right 30px bottom 30% or bottom 30% right 30px
	center bottom	right 30% top 30px or top 30px right 30%
	center 30%	right 30% top 30% or top 30% right 30%
	center 30px	right 30% bottom 30px or bottom 30px right 30%
	right top	right 30% bottom 30% or bottom 30% right 30%
	right center
	right bottom
	right 30%
	right 30px
	30% top
	30% center
	30% bottom
	30% 30%
	30% 30px
	30px top
	30px center
	30px bottom
	30px 30%
	30px 30px

Huh! I'm exhausted, and there are too many ways to support this!

Four, try more hands-on

In the previous section, after learning clip-path attribute, we knew how to write the grammar of the circle cut ( circle() ) we want, so do you really know it? Maybe you read the example given by MDN, and you know what the circle(40%) is, as shown in the figure below.

As I said before, MDN only lists you circle() , but we just learned its syntax and learned that there are other circle(40% at left) write it (for example, 06125c0579ddc7), and the MDN document only tells you which ones are supported. Grammar, it does not clearly tell you which grammar does and what effect it can achieve.

At this time, we need to try

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>尝试clip-path的circle()的使用</title>
    <style>
        #zero2one {
            width: 100px;
            height: 100px;
            background-color: ;
            clip-path: circle(40%);   <!-- 等会就在这一行改来改去,反复尝试！ -->
        }
    </style>
</head>
<body>
    <div id="zero2one"></div>
</body>
</html>

Take a look at the effect, um, it’s the same as the one shown by MDN

Modify the value clip-path: circle(60%) to see the effect

I seem to have a pattern. It seems to be based on the center of the element. 60% means to draw a circle from the center to 60% of the edge length and cut out the content outside the circle. These are not mentioned in the MDN document, and I have verified them by my own hands.

Next, let's try other syntax~

Try to change the value to clip-path: circle(40% at top)

Eh? It's amazing! Why does it look like this? I don’t seem to find any rules yet. Change the value and try clip-path: circle(80% at top)

It seems that the center of the circle moved to the middle of the top of the element, and then a circle was drawn with a radius of 80% of the length from the center to the bottom edge of the element, and then cropped. So far we seem to understand circle() grammar at back <position> data type is doing, and probably used to draw a circle cut out of the control center position

The rest of the time is left to you to test all the grammars one by one. Let me give a simple example. For example, if you try clip-path: circle(40% at 30px) again, you must be curious what this means, let’s see the effect.

Intuitively, the entire circle has moved some distance to the left. When we did not set at 30px , the center of the circle was at the center of the element, but now it seems to be shifted to the right. Boldly guess that at 30px means the abscissa of the center of the circle and the distance of the element. 30px leftmost

Next, verify our guess and continue to modify its value clip-path: circle(40% at 0)

Obviously, the center of the circle at this time is in the middle of the leftmost part. It should be said that it proves our guess, so why not verify the ordinate? Continue to modify the value clip-path: circle(40% at 0 0)

Yes, very smoothly, the second at 0 0 0 means that the distance between the center of the circle and the top is 0. Then we can safely draw a conclusion at this time. For the value of the \<length\> 30px , 33em , the corresponding coordinates are as shown in the figure.

Well, the length of this article is already very long, I will not continue to introduce the use of other grammars, just to give an example, because this article is not originally introducing the circle() tutorial, interested readers can go on Do it yourself~

So practice is really important and important! ! MDN document does not give you a list of the corresponding effects of each grammar, because each is listed, the document looks very messy, so you can only rely on yourself. I remember Mr. Zhang Xinxu mentioned in a live broadcast that the features of CSS he mastered were all tested out with a lot of time, and he can't understand it by looking at any document. The use of a certain CSS property learned in this article may have been researched out of a few hours or even more than ten hours.

Many features of CSS will have compatibility issues, because there are many browser vendors on the market, and they support different degrees, and we usually understand the compatibility of a certain property of CSS. This is the case.

View the browser compatibility of an attribute of MDN

Use Can I Use to find the browser compatibility of an attribute

These are correct, but sometimes the browser compatibility of some CSS properties may not be available through these two channels, so what should I do? Manually try whether the effect of this attribute on each browser supports (Xinxu said he would do this before), I will not give an example of this, everyone should be able to appreciate

☀️ Finally

In fact, every CSS boss is not successful because of some quick learning paths. They all rely on constantly trying, recording, and summarizing various CSS knowledge, and they will often use the learned CSS knowledge to make one. The small demo is used to consolidate. In the past few months, I added a friend of Teacher Damo. I often see demo codes and articles of some new CSS features in his circle of friends (I really admire it). The coco boss is also, and I often post Some cool special effects realized by CSS only (it is said that there are no special effects that he can't realize~)

In addition, if you want to go deeper, you can also pay attention to the CSS specification. The more authoritative one is W3C's CSS Working Group , which contains many CSS specification documents.

Well, I recommend a few books that are recognized as good in the industry~ such as "CSS Definitive Guide", "CSS Revealed", "CSS World", "CSS New World" and so on...

Finally, for how to learn CSS? ", do you have any questions or do you think it is a good learning method? Welcome to leave a message to discuss in the comment area~

I am zero one , sharing technology, not only front-end, if you like, please give me a 👍🏻, thank you for your support! !

Welcome to pay attention to my public Front-end impression , and exchange technology together!