fantasai对新一代CSS开发者的三点建议

原文链接：@siusinng小倩

大家好！欢迎来到上海CSS开发者大会！

Welcome to the Shanghai CSS Developers Conference!

我叫fantasai，姓名是Elika Etemad。

I am fantasai, also known as Elika Etemad.

我是W3C CSS委员会的一个spec editor：也就是说我编写CSS的技术标准，如CSS Flexbox Level 1和CSS Writing Modes Level 3。

I am a spec editor in the W3C CSS Working Group, which means I edit the technical standards for CSS, such as CSS Flexbox Level 1 and CSS Writing Modes Level 3.

我于2004年身为“Invited Expert”（邀请专家）加入了CSS委员会。I joined the CSS Working Group as an Invited Expert in 2004.那时我正在大学学习土木工程。因为我觉得汉字那么漂亮，同时也学中文。At the time, I was studying civil engineering, and also, because I thought the writing was pretty, studying Chinese.其实对中国文字的了解是对CSS的发展很有用的。我很快成为了CSS委员会的国际化专家。It turns out that understanding Chinese was very useful to CSS development: I quickly became the CSS Working Group's internationalization expert.

你们看现在中国有很多CSS开发者了。You can see that today there are a lot of CSS developers in China.我希望你们都互相帮助，另外向今天不在场的同事和朋友传授今天所学的事物。I hope that you all help each other, and also teach your colleagues and friends who are not here the material you learn here today.

为了开始今天的课，To start today's lessons,我要介绍CSS的一些基本方针：I want to present a few fundamental guidelines for CSS:

第一个是分开内容和呈现方式。The first one is, separate content and style.用HTML表示内容。Use HTML to represent the content.用CSS表示模样。Use CSS to represent the presentation.对于响应式设计、无障碍、和保养性，这是基本架构。For device-responsive design, for accessibility, and for maintainability, this is a foundational architecture.

比方说，如果布局的视觉顺序有含义，

For example, when the visual order of the layout has meaning,例如表现排序列表的时such as when presenting a sorted list,确定顺序是在HTML正确写的。

make sure the order is represented correctly in the markup.不用Flexbox ‘order’ 属性改编它！Do not use the Flexbox 'order' property to perform this reordering!

另一方面合理阅读顺序跟视觉布局不一样，On the other hand, if the logical, reading order is different from the visual arrangement,在HTML写合理的顺序，再用CSS技巧改变布局。

use the logical order in the HTML, and use CSS techniques to rearrange the layout.

另一个例子是，As another example,如果吧像示意图或插画这样的有含义的图像，

when an image， such as a graph or illustration， provides information,放在HTML里。

put this in the HTML.但是如果图像只是装饰的，But if the image provides only decoration,用'background', 'border-image', 'list-style', 或 'content'的属性use the background, border-image, list-style, or content property放在CSS里。to put this in the CSS.

还有写HTML的时候，用正确的标签写HTML。Also, when writing HTML, strive to use correct， meaningful markup.标题用H1标签，段用P标签，列表用OL或UL标签，等等。Headings are H1, paragraphs are P, lists are OL or UL, etc.消除CSS，应该是吧网页还看的懂。When I turn off the CSS, the page should still make sense.这是CSS的大会，确实正确的CSS需要正确的HTML。This is a CSS Conference, but good CSS requires good HTML.

CSS委员会发奋创造像Flexbox和Grid Layout这样的强大的工具让改编版面容易。The CSS Working Group works hard to provide powerful tools.请聪明地使用这些工具，写结构良好的标记和布局。Please use these tools wisely, to help your markup be better-structured and your designs more adaptable.

第二条建议是，用多个浏览器进行测试。The second guideline is, test in multiple browsers.全球资讯网不是WebKit资讯网也不是微软资讯网。The World Wide Web is not the WebKit Web or the Microsoft Web.

我们需要你们帮忙，来维持全球资讯网对今天和明天的所有的人民自由开放。

We need your help to keep the Web open to everyone, now and in the future.

要记住，所有浏览器有错误，并且错误会以后被修了。

Remember that all browsers have bugs, and that bugs get fixed.

所欲不书写被浏览器的不规范行为依靠的网页。

So don't write web pages that depend on buggy behavior.好好的测试能给你帮忙。

Testing will help you do this.

最后，设计要符合适配性。Lastly, design for adaptation.

你们的网页通过多种多样环境被浏览：Your web page will be read in many environments:有小的屏幕，大的屏幕，更大字号，等等。

people with smaller screens, with larger screens, use larger font sizes, etc.记得CSS设计是能适应的。Remember that CSS layouts can adapt.

CSS给你内容合适的'auto';字体相对单位如‘em’和‘rem’;屏幕相对单位如‘vh’和‘vw’;白分数和flex系数。CSS gives you content-fitting layouts with 'auto' sizing, font-relative units like em and rem, viewport-relative units like vw and vh, percentages and flex ratios.如果这些还不足，Media Queries能完全改变网页布局。

And when these are not enough, we have Media Queries to completely change the layout.

学好使用CSS的工具来创造完美适配任何设备的网页。Learn to use these tools to create a website that will perfectly fit on anybody's device.

这是CSS的特殊功力！

This is the special power of CSS!