写css好痛苦_更少痛苦CSS体验

写css好痛苦

CSS can be a tricky little fellow. It’s easy to learn, but difficult to master. There are, after all, 122 CSS Level 2 Properties. Add to that pseudo-classes, selectors, inheritance, and specificity, and you have yourselves quite a bit of information to try and remember. Here are a few things that have made CSS development a little smoother for me, and hopefully they can do the same for you.

CSS可能是一个棘手的小家伙。 这很容易学习，但很难掌握。 毕竟，有122个CSS Level 2属性。 再加上伪类，选择器，继承和特异性，您将拥有很多值得尝试和记住的信息。 以下是一些使CSS开发更加顺利的事情，希望它们可以为您做同样的事情。

了解常见错误 (Know the common bugs)

Different browsers will handle CSS differently. This is something every CSS developer learns early on, sometimes painfully. Make sure when you come across a bug you force yourself to take a few minutes to look into it and gain an understanding of what is causing the problem. You will be surprised by how few fancy CSS hacks you will have to resort to if you know how to dodge the problems in the first place.

不同的浏览器对CSS的处理方式也不同。 这是每个CSS开发人员早期学习的东西，有时是痛苦的。 确保当您遇到错误时，迫使自己花费几分钟时间对其进行调查，并了解导致问题的原因。 如果您一开始就知道如何规避问题，那么您将不得不诉诸的奇特CSS hack会让您感到惊讶。

经常检查工作 (Check your work often)

After every couple rules you put into your stylesheet, you should be checking each browser you have access to so you can see what effect the rule had on the layout. The worst thing you can do, in my opinion, is to create your CSS entirely and then check it in each browser. Now you have to wade through all your CSS and try to find where the problem is coming from. However, if you are checking your work after every couple rules, you will have a pretty good idea where the problem lies, and you will be able to fix it that much more quickly.

在将每条规则放入样式表之后，您应该检查您有权访问的每个浏览器，以便可以看到规则对布局有什么影响。 我认为，最糟糕的事情是完全创建CSS，然后在每个浏览器中对其进行检查。 现在，您必须遍历所有CSS并尝试找出问题的根源。 但是，如果您每隔几条规则就检查一次工作，您将很清楚地知道问题出在哪里，并且可以更快地解决它。

了解你的资源 (Know your resources)

This may be the most important tip here. Like I said, with so many selectors, properties, bugs, etc. to try and memorize, you will undoubtedly have to turn for help on many occasions. It becomes important for you to know where you can find a solution, and where the solution will be explained in detail enough for you to understand it and be able to avoid it in the future. For example, when I run across a bug that I am not familiar with, the first place I turn to is Position Is Everything. They have wonderful write-ups on various bugs you will find in different browsers. If I just need to lookup a CSS property that I don’t use very often, then I turn to “CSS: The Definitive Guide”, by Eric Meyer. You need to know the places like this that you can turn to for answers.

这可能是最重要的提示。 就像我说的那样，要记住的选择器，属性，错误等太多，无疑，在很多情况下您都必须寻求帮助。 对于您而言，重要的是要知道在哪里可以找到解决方案，并且在哪里可以对解决方案进行足够详细的说明，以使您理解并在将来能够避免使用它。 例如，当我遇到一个我不熟悉的错误时，我要转到的第一个地方就是Position Is Everything 。 他们提供了许多有关在不同浏览器中发现的错误的精彩文章。 如果我只需要查找一个我不经常使用CSS属性，那么请转到Eric Meyer撰写的“ CSS：权威指南” 。 您需要知道可以找到答案的地方。

知道如何排除故障 (Know how to troubleshoot)

Knowing how to find the problem is half the battle. There’s plenty of ways to go about doing this, so you just have to find the techniques that work for you. While I can say that I haven’t ever used diagnostic styling quite to the extent that Eric Meyer posted in his 24ways article, I am a huge fan of using bright colored borders on my block elements to help me locate problem areas. Commenting out blocks of code at a time can also help a lot when trying to find out what elements have the troublesome styles applied to them. And I cannot recommend the Web Developer Toolbar extension for Firefox highly enough. I am so attached to that thing and its many useful troubleshooting features now that it pains me to work on a computer without it.

知道如何找到问题是成功的一半。 有很多方法可以做到这一点，因此您只需要找到适合您的技术即可。 虽然我可以说我从来没有像Eric Meyer在他的24ways文章中那样使用过诊断样式，但我还是非常热衷于在块元素上使用亮色边框来帮助我定位问题区域。 当试图找出哪些元素具有麻烦的样式时，一次注释掉代码块也可以有很大帮助。 而且我不能高度推荐Firefox的Web开发人员工具栏扩展 。 我非常喜欢那个东西及其许多有用的故障排除功能，现在让我痛苦的是没有它就可以在计算机上工作。

表现出耐心和幽默感 (Show patience and have a sense of humor)

Don’t worry if it seems like it is taking forever to get to the point where you don’t have to look up every little bug. Patience, young Padawan. There are a lot of bugs out there, and it can take awhile before you get to a point where you can recognize one right away.

不必担心似乎花了很长时间才能达到不必查找每个小错误的地步。 耐心，年轻的Padawan。 那里有很多错误，并且可能需要一段时间才能到达可以立即识别出一个错误的位置。

No matter how much you know, how many books you’ve read, or how many designs you’ve developed, there will still come times where a problem comes up that stumps you for awhile. There is just too much information to digest for you to expect to never run into problems. That’s when you just need to grin and bear it. Keep plugging away and be willing to laugh at simple mistakes you may make along the way. If CSS wasn’t challenging at times, wouldn’t that take some of the fun out of it?

无论您知道多少，已经读过多少书，或者已经开发了多少设计，有时仍然会出现问题，使您感到困惑。 太多的信息需要消化，以至于您永远不会遇到问题。 那时，您只需要咧嘴笑着忍受即可。 继续努力，并乐于嘲笑您在此过程中可能犯的简单错误。 如果CSS有时没有挑战性，那岂不是会从中获得一些乐趣吗？

翻译自: https://timkadlec.com/2007/12/a-less-painful-css-experience/

写css好痛苦