css框架和js框架_如何选择正确CSS工具包和框架

css框架和js框架

A Q&A about Susy and other toolkits, with Miriam Suzanne.

与Miriam Suzanne一起有关Susy和其他工具包的问答。

关于Miriam Suzanne和问答 (About Miriam Suzanne and the Q&A)

Miriam is a co-founder of OddBird, and is the author of Jump Start Sass at SitePoint. She is the creator of Susy, as well as a creator and contributor of other open source toolkits and projects. Last week, she was able to join us on the SitePoint Community for a live Q&A session, and took all manner of questions on Susy, toolkits, and deciding what sort of tools are needed for your layouts.

Miriam是OddBird的共同创始人，并且是SitePoint的Jump Start Sass的作者。 她是Susy的创建者，以及其他开源工具包和项目的创建者和贡献者。 上周，她能够加入我们的SitePoint社区 ，进行实时问答环节，并就Susy，工具箱以及确定布局需要哪种工具等问题进行了各种提问。

Let’s dive right in and take a look at some of the many questions that Miriam was able to answer for us!

让我们深入研究一下Miriam能够为我们解答的许多问题中的一些！

你的问题 (Your Questions)

问：在确定应用于CSS布局和样式的框架，库，工具包等方面，建议的第一步是什么？ (Q: What are your recommended first steps in determining what frameworks, libraries, toolkits (etc.) you should use for CSS layouts and styling?)

Miriam Suzanne: There is always a trade-off between the speed/familiarity of toolkits, and the added baggage of dependencies. If you’re working on a personal project, go with familiarity. Treat yourself. Otherwise, start with the smallest and most abstract toolkits, then work your way in. Bootstrap is a big commitment. Accoutrement-scale is not. I have a few toolkits that I load up at the start of any project bigger than a single page — then I work my way out from there. If you know you’ll need it: add it right away. If you think you might not need it, wait until you do.

Miriam Suzanne：在工具包的速度/熟悉程度和增加的依赖包之间始终需要权衡取舍。 如果您正在处理个人项目，请熟悉一下。 请你自便。 否则，请从最小和最抽象的工具箱开始，然后逐步进行。Bootstrap是一项重大承诺。 规模不是。 在任何大于单个页面的项目开始时，我都会加载一些工具包，然后从那里开始工作。 如果您知道需要，请立即添加。 如果您认为可能不需要它，请等到您这样做。

It’s always a balancing act, and there’s no way to “get it right” every time. Be prepared to change your mind later. Refactoring is not a mistake — it’s the entire point of iterative process.

这始终是一种平衡的举动，没有办法每次都“做到正确”。 准备以后再改变主意。 重构不是一个错误-这是迭代过程的整个重点。

问：为什么要苏西？ (Q: Why Susy?)

Miriam Suzanne: At the time, in 2009, it was much more difficult to create fluid layouts on a grid. There were more browser inconsistencies, we only had floats to work with, and we didn’t have border-box sizing. I was using a technique that I picked up from Natalie Downe’s CSS Systems talk. It’s a great talk, if you want to see where all my inspiration has come from.

Miriam Suzanne：那时，在2009年，在网格上创建流畅的布局要困难得多。 浏览器有更多不一致的地方，我们只有浮点数可以使用，没有border-box大小。 我使用的是从Natalie Downe的CSS Systems演讲中获得的技术。 如果您想了解我所有灵感的来源，这是一个很棒的演讲。

Her system is great, but it requires a lot of math. The math isn’t complex, but it’s very repetitive – and without Sass, the results look like meaningless numbers. I didn’t like that, so I complained at one of our work retreats, and someone showed me Sass – which was just starting to gain some small popularity at the time. I wrote Susy that night. It was tiny, and just helped me with the repetitive math. I also built in a few helpers to deal with browser bugs. That’s all I wanted.

她的系统很棒，但是需要很多数学运算。 数学并不复杂，但却非常重复-如果没有Sass，结果看起来像毫无意义的数字。 我不喜欢这样，所以我在我们的一次务虚会上抱怨了，有人向我展示了Sass –当时才刚刚开始受到一些欢迎。 那天晚上我写了Susy。 它很小，只是帮助我进行了重复的数学运算。 我还内置了一些帮助程序来处理浏览器错误。 这就是我想要的。

The other open-source options at the time were huge CSS libraries with pre-determined grids, and I wasn’t interested in that. Susy, as far as I know, was the first to move grid systems into Sass in a native way. There is no way to build Susy in pure CSS.

当时的其他开放源代码选项是具有预定网格的庞大CSS库，我对此并不感兴趣。 据我所知，Susy是第一个以本机方式将网格系统移入Sass的人。 没有办法在纯CSS中构建Susy。

Honestly, I don’t use Susy much any more. It doesn’t solve a problem that I face on a regular basis. But I hope it’s still useful to people who are dealing with floated grids and older browsers.

老实说，我不再使用Susy。 它不能解决我经常遇到的问题。 但我希望它对于处理浮动网格和旧版浏览器的人仍然有用。

问：使用Susy，边框调整大小和flexbox有什么异同？ (Q: What are the similarities and differences of using Susy vs border-box sizing vs flexbox?)

Miriam Suzanne: You can use all three together! These actually solve slightly different problems:

Miriam Suzanne：您可以一起使用这三个！ 这些实际上解决了稍微不同的问题：

• Flexbox is what I call a “layout technique” (similar to floats, inline-block, tables, etc). It’s a way that the browser understands creating regions on the page, and managing how they flow. All of these techniques have advantages and drawbacks. But flexbox was the only one designed to handle layout. Currently, that makes it my favorite, despite the issues. Soon, we’re also getting grid layouts in CSS, so that will be another option. I recommend learning how they all work, so you can use each one where it makes the most sense. One tool is never enough!

  Flexbox是我所谓的“布局技术”(类似于浮动，内联块，表等)。 这是浏览器了解在页面上创建区域并管理区域流动方式的一种方式。 所有这些技术都有优点和缺点。 但是flexbox是唯一设计用于处理布局的软件。 目前，尽管存在问题，但这仍使其成为我的最爱。 不久，我们还将在CSS中获得网格布局，因此这将是另一种选择。 我建议学习它们如何工作，以便您可以在最有意义的地方使用它们。 一种工具是永远不够的！

• Box-sizing helps you to describe the size of a single element in new ways. Do you want to define the content, and let the padding expand? If so, use content-box. If you want to describe the outer size, and let the content adjust, use border-box. Having that flexibility is huge, and a big upgrade from what we had seven years ago. Again, learn how both options work, so you can be more flexible.

  大小调整框可帮助您以新的方式描述单个元素的大小。 是否要定义内容，并让填充扩展？ 如果是这样，请使用内容框。 如果要描述外部尺寸并调整内容，请使用边框。 具有这种灵活性是巨大的，并且比我们七年前有了很大的升级。 再次，了解这两个选项如何工作，以便您可以更加灵活。

• Susy is just a calculator. If you find yourself doing a lot of math to get the grid you want, use Susy. Or, in many cases, I think it would be better to say “maybe your grids don’t actually need to be that complex”.

  Susy只是一个计算器。 如果发现自己做了很多数学运算以获得所需的网格，请使用Susy。 或者，在许多情况下，我认为最好说“也许您的网格实际上不需要那么复杂”。

问：您能否分享Susy在幕后所做的一些计算？ (Q: Can you share some of the calculations Susy is doing behind the scenes?)

Miriam Suzanne: The primary Susy calculation is this: $target-width / $context-width = $multiplier At it’s simplest, that is identical to using percentage(1/5) to get 1 column out of 5. When you add gutters, that gets more complex. The total isn’t really 5 – it’s something larger.

Miriam Suzanne： Susy的主要计算方法是： $target-width / $context-width = $multiplier最简单的说，这与使用percentage(1/5)从percentage(1/5)中获得1列相同。在添加装订线时，这变得更加复杂。 总数实际上不是5 –更大。

If you are interested in the basics, check out the Susy 3ish branch where we’ve trimmed Susy down to the bare essentials.

如果您对基础知识感兴趣，请查看Susy 3ish分支 ，我们将Susy缩减为基本知识。

问：您现在主要使用某个工具包吗？ (Q: Is there a toolkit that you are predominately working on right now?)

Miriam Suzanne: I’ve moved my focus back a step, concentrating less on consistent output (the style guide we want to generate) and focussing more on consistent input. I’ve been slowly building out a set of Sass helpers that, like Susy, are completely un-opinionated. Our Accoutrement tools are so abstract, they mostly have no output at all. But they are useful in helping us define patterns in the code, tracking those patterns in a single place and automatically generating style guides based on that information.

Miriam Suzanne：我将重点移了一步，将重点放在一致的输出 (我们要生成的样式指南)上，而将更多的注意力放在一致的输入上 。 我一直在慢慢地建立一套Sass助手，就像Susy一样，它们完全没有调皮。 我们的Accoutrement工具是如此抽象，它们几乎根本没有输出。 但是它们对帮助我们在代码中定义模式，在单个位置跟踪这些模式以及基于该信息自动生成样式指南很有用。

问：开始制作工具包时，首先应该考虑什么？ (Q: What things should you consider, first and foremost, when starting to make a toolkit?)

Miriam Suzanne: I love this one.

Miriam Suzanne：我喜欢这个。

I love when other people are interested in building toolkits for themselves. I think building toolkits is a great way to learn about code. It doesn’t matter how many people have solved the problem, solving it again yourself is a useful exercise.

当别人对自己构建工具包感兴趣时，我会喜欢。 我认为构建工具箱是学习代码的好方法。 不管有多少人解决了问题，自己重新解决是一个有用的练习。

Here’s where I start:

这是我开始的地方：

• What doesn’t make sense in my code base? What isn’t readable to someone who didn’t write it?
  在我的代码库中没有什么意义？ 不写的人看不懂什么？
• What problems do I have to solve over and over again?
  我必须一遍又一遍解决什么问题？
• Where am I repeating myself, either in the code or in my process?
  在代码或过程中，我在哪里重复我自己？
• Where do I get frustrated or bored?
  我在哪里感到沮丧或无聊？

Toolkits should always be used to make your code more readable, and more meaningful. A great reason to use Susy is because 12.456% doesn’t mean anything, but span(1 of 6) does. If you have code that isn’t meaningful, figure out what would give it meaning. clearfix is another great example of that. Without hiding it inside a mixin, your clearfix is just a strange mess of meaningless hacks. When you call a well-named mixin, you are adding clarity around why that code exists.

应该始终使用工具箱来使您的代码更具可读性和意义。 使用Susy的一个重要原因是12.456%内容什么都没有，但是span(1 of 6)却没有。 如果您的代码没有意义，请找出将赋予它含义的内容。 clearfix是另一个很好的例子。 没有将其隐藏在mixin中，您的clearfix只是一堆毫无意义的hack。 当您调用一个名字很好的mixin时，您将在清楚为什么存在该代码的地方增加清晰度。

I also think it’s important to be iterative in your tool design. It’s ok for your first solution to be sloppy and over-engineered. That’s a great place to start! Then you try using it, find out which parts are getting in your way, and fix them. I think the mixins are getting in the way of Susy, so I plan to do something about it. Accoutrement have all gone through various stages as we add and remove features that don’t quite help as much as we expected.

我还认为在工具设计中进行迭代很重要。 您的第一个解决方案草率和过度设计是可以的。 那是一个很好的起点！ 然后尝试使用它，找出妨碍您安装的部件并进行修复。 我认为mixins妨碍了Susy的使用，因此我打算对此做一些事情。 随着我们添加和删除功能并没有达到我们预期的效果，Accountrement经历了各个阶段。

Get it wrong first! Clean it up later!

首先弄错了！ 稍后清理！

感谢您加入我们！ (Thanks for joining us!)

Thanks to everyone who was able to join us for the Q&A, and for the excellent array of questions that were thrown out there. And thanks especially to Miriam Suzanne, for taking the time to join us! If you’re curious for more, check out the complete discussion on the SitePoint Community.

感谢所有能够加入我们的问答环节以及在那里提出的一系列精彩问题的所有人。 还要特别感谢Miriam Suzanne抽出宝贵的时间加入我们！ 如果您想了解更多信息，请查看SitePoint社区上的完整讨论 。

Stay tuned for more live events from SitePoint in the near future!

请继续关注不久后来自SitePoint的更多现场活动！

翻译自: https://www.sitepoint.com/how-to-choose-the-right-css-toolkits-and-frameworks/

css框架和js框架