1

有什么方法可以“进入浏览器引擎”(例如 chrome 上的 webkit),查看 css 声明是如何解释的,并识别错误?

我的意思是,在“检查元素”下,您可以在开发人员工具中看到哪些 css 规则将其用于 HTML 对象。但是从那时起,如果 css 本身是错误的,那么对于大多数错误来说,没有办法看到什么是错误的。

例如:假设我写了

“-webkit-动画:fgfdgfdgdf 500ms”

代替

“-webkit-animation:MyAnimation 500ms”

我想得到类似“找不到对象 fgfdgfdgdf”的错误。

或者,假设我写道:

“左:200px;

位置:静态;"

由于“position:static”,浏览器将忽略“left”属性。有什么办法可以让“左”属性出现某种错误——比如“由于静态定位导致属性无效”?

谢谢你。

4

1 回答 1

0

基本上,我相信这取决于您的知识。这是一项技能,需要大量的热情和专业知识才能做到这一点。

以下是一些可以用来指导您的基准。

取自 - http://css-tricks.com/judging-css-spotting-bad-code/

明显的测试

看看网站。如果它看起来一团糟,那么他们做得不好。

更进一步,检查它是否支持您同意的浏览器。该设计应该适用于所有这些。

如果设计应该是响应式的,请调整浏览器窗口的大小以确保设计无论宽度或高度如何都能正常工作。

如果一切看起来都不错,那是很好的(也是必需的)第一步。但这并不是 CSS 好的绝对证据。

格式化测试

查看编写的 CSS 文件。请记住,最好的做法是为实时网站提供缩小的 CSS(所有不重要的空白都被删除),所以不要看那个。

在此处输入图像描述
这不是要被人类阅读的。查看他们实际创建的文件。

如果你有一个既定的风格指南,预计会被遵循,那么它被遵循了吗?

如果不是,它看起来是否一致——就好像他们有自己的风格指南一样?还是有点草率?邋遢的意思有时选择器后面有一个空格,有时没有。有些代码块是缩进的,有些则不是。单行 CSS 与多行 CSS 混合在一起,没有押韵或原因。

干净的代码是尊重开发人员的标志。一个尊重工艺和他们所做的工作的人。

在此处输入图像描述
如果前两个测试通过,那就太好了。但仍然不能完全证明 CSS 是好的。

选择器测试

前两个测试几乎任何人都可以完成,但从这里开始,您需要自己熟悉 CSS。开始阅读 CSS,看看你所看到的是否对你有意义。

CSS...

.article #comments ul > li > a.button {
  /* Crazy town */
}

希望这可以帮助...

于 2013-11-05T13:53:32.053 回答