My understanding of CSS Cascade

* ****** The yellow background section is nonsense. Ignore ********

I have only three front-ends. I have been working for more than a year, and the other two are estimated to be at least four or five years. I thought I could learn something from them, however, after a period of understanding, we found that they have been dumped several times by the times. I thought that three people could do a lot of work at the front end, have their own tools, have their own ideas, and have their own styles. Unfortunately, the team leader is helpless. I have mentioned my resignation earlier. Because of the boss's face, I finally agreed to resign next year. During this time, I have been trying to write some of my thoughts, but I am also very lazy. I warned myself last week that no matter what I write, I wrote a log here every day to give a warning. I also hope that people who are good at thinking can communicate with me.

Thinking about planning CSS is due to the tangle of the past six months, frequent project changes, and many times to the team lead to make a good plan, but he still retains his outsourcing ideas (no BS other people mean) -- no matter what you do. I always think that the maintainability of a product is much more important than development. These things are always used by myself, just like their children. Unfortunately, every time I put forward my opinion, I was overwhelmed by the team lead and refused to accept my opinion. So I have been rubbing my ass with them for six months. However, this makes me understand the truth. Cooperation will cooperate with smart people who will think about it and work with honest people who will not think about it.

Let's just say nothing about it. Return to CSS.

CSS translation is called a stacked style sheet. Style doesn't matter. What I want to talk about is the understanding of stack.

Cascade is like inheritance and overloading in Java. Although CSS also has inheritance, this inheritance is not another inheritance, and the inheritance in CSS is selective (the statement may be inaccurate, some will inherit, some will not inherit, such as font and border ).

 

When applied to the stack, the combination of CSS and sub-Selector are mainly used. In my use, a combination is mainly used to add attributes (equivalent to extending an interface), and a sub-selector is mainly used to overwrite attributes (equivalent to reloading a method). Many people have told me that, the CSS of an element should be set as little as possible. At first I thought this was very reasonable. Later I understood it and found that it should be a sub-element with less width. It is best to achieve no width. Let the child element change with the width of the parent element. When the width is required, we add a (combination) class to implement an extension. Along this line of thinking, I think not only the width, padding, margin, but also the effects of block size display should be less specified. Therefore, after the selection and removal of width, padding, and margin, the rest is public, that is, my CSS infrastructure, or abstract CSS with a framework, in addition to the basic layout code, we try to avoid using IDs and naming them as vulgar as possible. If you Understand Java, you should know that the abstract classes in Java cannot be directly instantiated. Obviously, this abstract CSS cannot be directly used. If you want to use it, it must be instantiated for a combination class or a sub-selector.

Abstract CSS only contains simple public attributes. The attributes of a combination class are mainly used to express some size-related attributes, and there is no overlap between the two. Therefore, the writing sequence does not conflict. Similarly, the sub-Selector must have a higher priority than the abstract CSS, so you can rest assured to write. The purpose I want to achieve is to repeat the code as few as possible and use combinations within the acceptable range to spell out pages to achieve seamless CSS semantic migration.

Not clear. For the previous example:

 

The above is a result page of Dangdang's "schoolbag" search. We can see two lists. How can we achieve this? I wrote it according to what I said above.

View code

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> </title>
<Style type = "text/CSS">
/* Reset */
HTML {Height: 100% ;}
Body {Height: 100%; line-Height: 1.5 ;}
Body, input, select, textarea {font-size: 12px; font-family: "\ 5b8b \ 4f53" Sans-serif ;}
Body, P, DL, DD, UL, ol, H1, H2, H3, H4, H5, H6, FORM {margin: 0 ;}
Ul, Ol {padding-left: 0; List-style-type: none ;}
IMG {border: 0 ;}
A {text-Decoration: none; color: #1a66b3 ;}
A: hover {text-Decoration: underline; color: #1a66b3 ;}
. Fix {* ZOOM: 1}
. Fix: After {display: block; content: "$"; Height: 0; clear: Both; overflow: hidden; visibility: hidden}
</Style>
<Style type = "text/CSS">
/* Basic layout */
# Container {width: 960px; margin: 0 auto ;}
# Main {display: inline; float: Right; width: 760px ;}
# Side {display: inline; float: Left; width: pixel ;}
. Dis {color: # 9c9c9c; text-Decoration: Line-through ;}
</Style>
<Style type = "text/CSS">
/* Public CSS of the list */
. Data_list Li {padding: 8px ;}
. Data_list Li: hover {Background: # faf0e6 ;}
. Data_list. IMG {display: block; Background: #7fffd4 ;}
. Data_list. Summary {margin-top: 8px ;}
. Data_list. Summary. Title {display: block ;}
. Data_list. Summary. Price {display: block; margin-top: 8px ;}
. Data_list. Summary. Price strong {color: # C30; Font: normal 18px Arial ;}
</Style>
<Style type = "text/CSS">
. Grid Li {display: inline; float: Left ;}
. Grid. IMG {Height: 200px ;}
. List. IMG {Height: 150px ;}
</Style>
<Style type = "text/CSS">
. Block {margin-bottom: 8px ;}
. Block. HD {margin-top: 1px; padding: 5px 8px; Border: 1px solid # d4d4d4 ;}
. Block. HD H3 {color: # FFF ;}
. Block. BD {border: 1px solid # d4d4d4; border-top: 0 ;}
. H_1 {Background: # 8b008b ;}
. H2 {Background: #006400 ;}
. H_3 {Background: # adff2f ;}
</Style>
<Style type = "text/CSS">
. Data_1 Li {width: 200px; margin-left: 27px; font-size: 14px ;}
. Data_2 Li {padding: 10px ;}
. Data_2. Price {text-align: center ;}
. Data_3 {padding: 0 5px ;}
. Data_3 Li {width: 350px ;}
. Data_3 Li. IMG {float: Left; width: 100px; Height: 100px ;}
. Data_3 Li. Summary {margin-left: pixel PX ;}
. Text_list {padding: 8px ;}
. Text_list Li {Line-Height: 24px ;}
</Style>
</Head>
<Body>
<Div id = "Wrap">
<Div id = "Container">
<Div id = "side">
<Div class = "Block">
<Div class = "HD H_1">
<H3> popular products </Div>
<Div class = "BD">
<Ul class = "data_list list data_2">
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
</Ul>
</Div>
</Div>
<Div class = "Block">
<Div class = "HD H2">
<H3> popular products </Div>
<Div class = "BD">
<Ul class = "data_list list data_2">
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
</Ul>
</Div>
</Div>
<Div class = "Block">
<Div class = "HD H_3">
<H3> popular products </Div>
<Div class = "BD">
<Ul class = "data_list list data_2">
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <SPAN class = "price"> <strong> ￥89.00 </strong> </span> <a class = "title" href = "# "> Disney watches, mother Bay dial free shipping for three days </a> </P>
</LI>
</Ul>
</Div>
</Div>
<Div class = "Block">
<Div class = "HD H_1">
<H3> hot news </Div>
<Div class = "BD">
<Ul class = "text_list">
<Li> promotion: Promotion </LI>
<Li> promotion: Promotion </LI>
<Li> promotion: Promotion </LI>
<Li> promotion: Promotion </LI>
<Li> promotion: Promotion </LI>
</Ul>
</Div>
</Div>
</Div>
<Div id = "Main">
<Ul class = "Fix data_list grid data_1">
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
</Ul>
<HR/>
<Ul class = "Fix data_list grid data_3">
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
<Li>
<A class = "IMG" href = "#"> </a>
<P class = "summary"> <a class = "title" href = "#"> MM bread, day, casual, cute canvas, backpack, backpack, shoulder bag sj002 </a> <SPAN class = "price"> <strong> ￥89.00 </strong> <em class = "dis"> ￥389.00 </em> </span> </P>
</LI>
</Ul>
</Div>
</Div>
</Div>
</Body>
</Html>

:

After writing, I still cannot clearly express what I mean. In fact, in the final analysis, it is still for the reuse and controllability of CSS. At the same time, I also used CSS layering (assigning abstract CSS to high-level CSS files ), unfortunately, it was killed by the idea of "getting a CSS to death" by the team leader.

All the pages are similar to each other because of the various brilliant JS effects. Therefore, the same series of pages on a website should be similar, in this way, the number of combinations and the page size can be controlled to an optimal range. In other words, there are too many IDs for a page for CSS. Either there is a problem with the design or the CSS code, and the JS hook with the ID function is the most suitable.

 

Later, I thought about this idea, which was not taken into account in some places. I will try again later.