css流程_终极CSS调查:工具和工作流程

css流程

Last week I introduced our first annual CSS survey. In that post, I focused on part one of the survey, which collects information on the skills and general habits of CSS developers when writing CSS. So far we’ve had about 2000 entries in the survey. So a big thanks to all who have participated so far!

上周,我介绍了我们的第一次年度CSS调查 。 在那篇文章中,我专注于调查的第一部分,该调查收集了有关CSS开发人员在编写CSS时的技能和一般习惯的信息。 到目前为止,我们在调查中已有大约2000个条目。 非常感谢到目前为止参加的所有人员!

If you’re interested in some of the results from the data so far as compiled from part one, here are a few interesting tidbits:

如果您对第一部分中到目前为止的数据结果感兴趣,请参考以下一些有趣的花絮:

  • More than a third of respondents said they’ve been writing CSS for more than 10 years.

    超过三分之一的受访者表示,他们已经编写CSS已有10多年了。
  • About 10% of respondents said they classify themselves as something other than a front-end developer, designer, or back-end developer.

    大约10%的受访者表示,他们将自己归类为前端开发人员,设计人员或后端开发人员以外的人员。
  • More than 40% of respondents consider themselves “high intermediate” in terms of skill level.

    超过40%的受访者认为自己在技能水平上是“高中级”。
  • The number of respondents who use IDs as CSS selectors vs. those who don’t is a virtual split, almost 50/50.

    使用ID作为CSS选择器的受访者人数与不使用CSS选择器的受访者人数几乎是50/50。
  • About 50% of respondents said they try very hard to keep their CSS maintainable; another 24% use a CSS methodology that does this for them.

    大约50%的受访者表示,他们非常努力地保持CSS的可维护性。 另有24%的人使用CSS方法为他们做到这一点。

That’s just a small preview of the results so far, and new entries are coming in regularly so we’ll have lots more data to share in the future.

那只是到目前为止结果的一小部分预览,并且会定期添加新条目,因此我们将来将有更多数据要共享。

继续第二部分… (Moving on to Part 2…)

This week I’m reminding our readers, if you haven’t done so already, to fill in part two of the survey. This part is focused on CSS tools, third party frameworks, different CSS methodologies, and various workflow-related subjects.

本周,我提醒读者,如果您尚未这样做,请填写调查的第二部分。 本部分重点介绍CSS工具,第三方框架,不同CSS方法论以及各种与工作流程相关的主题。

Topics covered include:

涵盖的主题包括:

  • Popular frameworks like Bootstrap, Foundation, etc.

    流行的框架,例如Bootstrap,Foundation等。
  • Pre- and post-processors like Sass, Less, Myth, and PostCSS

    Sass,Less,Myth和PostCSS等预处理器和后处理器
  • Habits with methodologies like OOCSS, BEM, Atomic CSS, etc.

    使用OOCSS,BEM,Atomic CSS等方法的习惯。
  • Reporting bugs

    报告错误
  • Workflow stuff like minification, critical CSS, and producing documentation

    缩小,关键CSS和制作文档之类的工作流内容

In all, this part has 27 questions plus an optional field for general feedback on the survey. That means this part of the survey is about the same length as the previous part, so it should only take about 10 minutes to complete.

总体而言,这部分有27个问题,外加一个可选字段,用于对调查进行总体反馈。 这意味着调查的这一部分与上一部分的长度大致相同,因此只需大约10分钟即可完成。

想继续第3部分吗? (Want to Move on to Part 3?)

If you don’t have time to fill out part 3 this week, that’s no problem. But if you still have a few minutes to spare, feel free to jump ahead to the next part:

如果您本周没有时间填写第3部分,那没问题。 但是,如果您还有几分钟的时间,请随时跳到下一部分:

And if you missed the first part, you can go back to last week’s post and fill that out too.

如果您错过了第一部分,则可以返回上周的帖子 ,也可以填写。

Next week I’ll post an official reminder for part 3, and then after giving the survey a little more time, we’ll compile the results and share them with everyone.

下周,我将发布第3部分的官方提醒,然后给调查多一点时间,我们将汇总结果并与所有人共享。

翻译自: https://www.sitepoint.com/the-ultimate-css-survey-tools-and-workflow/

css流程

<body>[removed][removed] <div class='progress'>   <div class='progress_inner'>     <div class='progress_inner__step'>       <label for='step-1'>Start order</label>     </div>     <div class='progress_inner__step'>       <label for='step-2'>Prepare gift</label>     </div>     <div class='progress_inner__step'>       <label for='step-3'>Pack gift</label>     </div>     <div class='progress_inner__step'>       <label for='step-4'>Decorate box</label>     </div>     <div class='progress_inner__step'>       <label for='step-5'>Send gift</label>     </div>     <input checked='checked' id='step-1' name='step' type='radio'>     <input id='step-2' name='step' type='radio'>     <input id='step-3' name='step' type='radio'>     <input id='step-4' name='step' type='radio'>     <input id='step-5' name='step' type='radio'>     <div class='progress_inner__bar'></div>     <div class='progress_inner__bar--set'></div>     <div class='progress_inner__tabs'>       <div class='tab tab-0'>         <h1>Start order</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-1'>         <h1>Prepare gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-2'>         <h1>Pack gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-3'>         <h1>Decorate box</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>       <div class='tab tab-4'>         <h1>Send gift</h1>         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris tortor ipsum, eleifend vitae massa non, dignissim finibus eros. Maecenas non eros tristique nisl maximus sollicitudin.</p>       </div>     </div>     <div class='progress_inner__status'>       <div class='box_base'></div>       <div class='box_lid'></div>       <div class='box_ribbon'></div>       <div class='box_bow'>         <div class='box_bow__left'></div>         <div class='box_bow__right'></div>       </div>       <div class='box_item'></div>       <div class='box_tag'></div>       <div class='box_string'></div>     </div>   </div> </div> <div 0; font:normal 14px/24px 'MicroSoft YaHei';">  </div> </body> CSS3步骤流程查看动画特效是一款分为5个步骤的查看商品订单流程代码,简洁又好看,推荐下载。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值