How to avoid underlines when naming css layout

The content of this article is about trying to avoid underlines when naming CSS layouts. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Friends who have used css hacks should know that naming with underscores is also a hack. For example, using a name like "_style" can make most browsers other than IE The definition of this style is ignored, so using "_" as the delimiter when naming is irregular. An error message will appear when doing CSS checking, so avoid using underscores in names.

For this purpose, you need to find a symbol that can replace the underscore and is compliant with the standards. Of course, you don’t have to use this kind of separator, it’s just a matter of personal habits.

I did a small test and replaced the underscores with "~", "$", "`", "&" and "-". As a result, only the "-" sign can be used. And the support for js is also normal. Take a look at the test:

The following is the quoted content:

css part:

The code is as follows:

.try-a{ color:#00f; }
.try~a{ color:#00f; }
.try`a{ color:#00f; }
.try&a{ color:#00f; }
.try$a{ color:#00f; }
.try-b{ color:#f00; }
.try~b{ color:#f00; }
.try`b{ color:#f00; }
.try&b{ color:#f00; }
.try$b{ color:#f00; }

html Part:

The code is as follows:

<div id="a" class="try-a">try1</div>
<div id="b" class="try~a">try2</div>
<div id="c" class="try`a">try3</div>
<div id="d" class="try&a">try4</div>
<div id="e" class="try$a">try5</div></p> <p><input type="button" value="ok" onclick="b（）；" />

js part:

The code is as follows:

function b（）{
document.getelementbyid（"a"）。classname="try-b";
document.getelementbyid（"b"）。classname="try~b";
document.getelementbyid（"c"）。classname="try`b";
document.getelementbyid（"d"）。classname="try&b";
document.getelementbyid（"e"）。classname="try$b";
}

The result is that "try1" turns red and the display is normal. However, in CSS definitions, the id selector is often used. If "_" is used in the id name on the page, the underline "_" will inevitably appear in the css style, so here you must also pay attention to the id. Also avoid using underscores in naming.

The above is the complete introduction to try to avoid underlines when naming css layout. If you want to know more about CSS3 tutorial, please pay attention to the PHP Chinese website.

The above is the detailed content of How to avoid underlines when naming css layout. For more information, please follow other related articles on the PHP Chinese website!