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

我的意思是,在“检查元素”下,您可以在开发人员工具中看到哪些CSS规则将其设置为HTML对象。但是从这一点来看,如果CSS本身是错误的,则对于大多数错误,您将无法查看错误所在。

例如:假设我写了

“ -webkit-animation:fgfdgfdgdf 500ms”

代替

“ -webkit-animation:MyAnimation 500ms”

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

或者说我写了:

“左:200px;

位置:静态;”

浏览器将因为“ position:static”而忽略“ left”属性。有什么办法可以使“ left”属性出现某种错误-诸如“由于静态定位导致属性无效”之类的东西?

谢谢。

最佳答案

基本上,我认为这取决于您的知识。这是一项技能,需要大量的热情和专业知识才能正确完成。

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

取自-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 */
}


希望这可以帮助...

10-06 04:34
查看更多