超实用的css代码段_快速启动您的项目：便捷CSS代码段集合

超实用的css代码段

In one of the previous articles “Basic Ready-to-Use CSS Styles”, we saw how we could create a suite of classes to help the design process while making a website. I hope you made your own set of patterns!

在先前的文章“基本的即用型CSS样式”中，我们看到了如何创建一组类来帮助创建网站的过程。 希望您能制定自己的模式！

Today we are going to see how we can continue this exercise with some things a little bit more technical. I’ll show you a bunch of CSS snippets you may or may not know, which can dramatically increase your CSS development speed.

今天，我们将看到如何通过一些更加技术性的事情来继续进行此练习。 我将向您展示一些您可能不知道CSS片段，它们可以极大地提高CSS的开发速度。

Indeed, isn’t there some properties or CSS tricks you always have to check the syntax for, every single time you want to use them? Don’t you ever want to have some kind of way to avoid endlessly repeating the same lines of code?

确实，是否没有每次您每次都要使用某些属性或CSS技巧来检查语法？ 您是否不想使用某种方法来避免无休止地重复相同的代码行？

Of course you do my friends! We will see how we can fix all of this. And in the meantime, we will briefly introduce some very useful mixins for those of you who are digging into CSS preprocessors. What do you say? Ready?

当然，你是我的朋友！ 我们将看到如何解决所有这些问题。 同时，我们将为正在研究CSS预处理程序的人员简要介绍一些非常有用的mixin。 你说什么？ 准备？

Before we go, let me tell you how I divided this article:

在我们开始之前，让我告诉您如何分割本文：

1. Shorthand classes

   速记班

2. Design-related snippets

   与设计有关的摘要

3. Development-related snippets

   与开发相关的摘要

4. Miscellaneous

   杂

5. Mixins (CSS preprocessors)

   Mixins(CSS预处理器)

速记班 (Shorthand classes)

Let’s begin with shorthand classes, which are a very common things. The point is to allow you to quickly do this or that without struggling to target your element with crazy town selectors.

让我们从速记类开始，这是很常见的事情。 关键是让您快速执行此操作，而不必为疯狂的城镇选择者而苦恼地定位您的元素。

The best example is probably the one where you have some text and an image you want to include on the left side of the text. You can either target the image directly in the context (class/ID) or use one of your awesome shorthand classes:

最好的例子可能是您有一些文字和要在文字左侧包含的图像的例子。 您可以直接在上下文(类/ ID)中定位图像，也可以使用一种很棒的速记类：

.float-left /* Or whatever name you like */ {
	float: left;
}

.float-right /* Or whatever name you like */ {
	float: right;
}

Nothing more. Back to our example: you are building your markup until you have to insert an image. Easy peasy, you simply add the .float-left class to the image, and it’s done. Now you can go back to your CSS file with class/ID targeting and such. Maybe another example?

而已。 回到我们的示例：您正在构建标记，直到必须插入图像为止。 轻松自在，您只需将.float-left类添加到图像，即可完成。 现在，您可以返回具有类/ ID定位等CSS文件。 也许是另一个例子？

.hide {
	display: none;
}

.show {
	display: block;
}

You want to hide or show some of your elements for some reason. Instead of targeting an element directly and add display: none, you simply give it the .hide class.

您出于某种原因想要隐藏或显示某些元素。 无需直接定位元素并添加display: none ，只需给它提供.hide类。

This can also make your JavaScript development a lot easier. Imagine, you want to show those X items you set to display: none? You can now simply target all elements with the .hide class.

这也可以使您JavaScript开发更加容易。 想象一下，您想显示设置为显示的X个项目：没有？ 现在，您可以使用.hide类简单地定位所有元素。

I think you get the point of these shorthand classes. They are not much than just a single CSS property, but thanks to them, you don’t have to go back to your CSS files and struggle with CSS selectors.

我认为您理解了这些速记课程。 它们不仅仅是一个CSS属性，但是由于有了它们，您不必再回到CSS文件并为CSS选择器而苦恼。

与设计有关的摘要 (Design-related snippets)

If you have read “Basic Ready-to-Use CSS Styles”, you already know some examples of design-related snippets. Those are little classes you can easily set to your elements in order to make the design process lighter and simpler, and to keep some kind of common style. Let’s dig a little bit into it, shall we?

如果您已阅读“基本的即用型CSS样式” ，那么您已经知道一些与设计相关的摘要示例。 这些小类可以轻松设置为元素，以使设计过程更轻松，更简单，并保持某种通用样式。 让我们深入研究吧？

Let’s start with something you’ll need in pretty much every single project you’ll ever work on: font styles. Creating some appealing combination of font-size, line-height and fonts can be tricky. Let’s make a few that will easily cascade through our document.

让我们从您将要从事的几乎每个项目中需要的东西开始：字体样式。 创建一些吸引人的字体大小，行高和字体组合可能很棘手。 让我们简单地介绍一下我们的文档。

.content {
    font: 1em/1.4 Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

.title {
	font: 1.7em/1.2 Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;
}

.code {
    font: 0.8em/1.6 Monaco, Mono-Space, monospace;
}

This snippet does a few things:

此代码片段可做一些事情：

• First, it changes the default font styles for your main content. The idea is to apply this to the root element in order to let it cascade to all elements.
  首先，它将更改主要内容的默认字体样式。 想法是将其应用于根元素，以便使其级联到所有元素。
• Second, it gives some emphasize to any element with the .title class with a classy serif font. Adapt it to suit your needs.
  其次，它强调了.title类中具有经典衬线字体的任何元素。 对其进行调整以适合您的需求。
• Last, it gives code elements (inline or block) some special styles with a monospace font and a smaller font size.
  最后，它为代码元素(内联或块)提供了一些特殊样式，这些样式具有等宽字体和较小的字体大小。

It may seem silly, but it can be a huge time saver when you don’t want to specify font styles every single time you use a new element. Just add the according class, and let the cascade do the rest.

这看起来很愚蠢，但是当您不想每次使用一个新元素来指定字体样式时，它可以节省大量时间。 只需添加相应的类，然后让层叠进行其余的工作即可。

Maybe something a bit more practical now: a “disabled” class. “What for”, you ask? Whenever you want to show something is being disabled simply add the .disabled class (or whatever you’d like to call it). First of all, it will turn its opacity to 0.5, but more importantly, it will disable all pointer events on it (hover, click, etc.).

现在也许更实用一些：“残疾人”课。 “问什么” ，你问？ 每当您想显示某些内容被禁用时，只需添加.disabled类(或任何您想调用的类)即可。 首先，它将不透明度变为0.5，但更重要的是，它将禁用所有指针事件(悬停，单击等)。

.disabled {
	pointer-events: none;
	opacity: 0.5;
}

A live example would be to give this class to the submit button of a form as a default. When every required field is properly filled, remove this class with JavaScript. Clean and simple, it helps the user understand he did everything right.

一个实际的例子是将此类作为默认的表单提交按钮。 正确填写每个必填字段后，请使用JavaScript删除此类。 干净而简单，它可以帮助用户了解他所做的一切正确。

Important: don’t forget to add some server side verification. CSS and JavaScript can easily be manipulated. 😉

重要提示：不要忘记添加一些服务器端验证。 CSS和JavaScript易于操作。 😉

Another very easy example taking advantage of powerful CSS selectors would be the well known snippet which will give tables a Zebra look:

利用功能强大CSS选择器的另一个非常简单的示例是众所周知的代码段，它将使表格具有Zebra的外观：

table tr:nth-child(even) {
	background: rgba(0,0,0,0.1);
}

Note: you could also use the odd keyword for the nth-child property to target odd numbers. And of course you can pick whatever color you want. 😉

注意：您还可以对nth-child属性使用odd关键字来定位奇数。 当然，您也可以选择所需的任何颜色。 😉

The last snippet example directly affecting design: some improved link styling.

最后一个片段示例直接影响设计：一些改进的链接样式。

a {
	text-decoration: none;
	color: #08C;
	transition: all 0.3s ease-out;
	position: relative;
	padding: .5em;
	margin: -.5em;
}

a:hover { color: #0AF; }

We just did four things here:

我们在这里做了四件事：

• We removed the default underline by setting text-decoration to none.

  通过将text-decoration设置为none我们删除了默认的下划线。

• We changed the color to a different yummier blue!
  我们将颜色更改为其他的yummier蓝色！
• We added a CSS transition to make the move to the hover state easier (remember to add vendor prefixes).
  我们添加了CSS过渡，以使移至悬停状态更加容易(请记住添加供应商前缀)。

• We used this awesome technique from Joshua Hibbert to increase the clickable area on links. This is especially useful when it comes to mobile navigation, where clicking links can be tricky.

  我们使用了约书亚·希伯特(Joshua Hibbert)的这项出色技术来增加链接上的可点击区域。 当涉及到移动导航时，这尤其有用，因为单击链接可能很棘手。

与开发相关的摘要 (Development-related snippets)

In the last section, we saw a few snippets which may be considered as design improvements. It means your design won’t break or look crappy if you omit them but it will look nicer if you use them. In this section, we will have a look at CSS snippets which are a less “design-related” but more related to the structure or development-related. Hard to tell, best explained with examples. So let’s go.

在上一节中，我们看到了一些摘要，这些摘要可以视为设计改进。 这意味着如果省略它们，设计不会破裂或显得break脚，但如果使用它们，外观会更好。 在本节中，我们将研究CSS片段，它们与“设计无关”，但与结构或开发无关。 很难说，最好用例子解释。 所以走吧

The first example is very easy. You’ve probably seen it many times before, especially since Paul Irish encouraged people to use it a while back:

第一个例子很简单。 您可能以前看过很多次，尤其是自Paul Irish鼓励人们使用它一段时间以来：

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

In case you don’t know what the box-sizing property does: it’s used to alter the default box-model used to calculate widths and heights of elements. The default box-model is set to “content-box” which means it does not include padding and borders into the width value. This can be a huge pain in the butt, especially when it comes to responsive web design so we use a clean box-model: border-box.

如果您不知道box-sizing属性的作用：它用于更改用于计算元素的宽度和高度的默认box-model。 默认的box-model设置为“ content-box”，这意味着它在width值中不包括填充和边框。 这可能是一个巨大的麻烦，特别是在涉及响应式Web设计时，因此我们使用一个干净的box-model：border-box。

A great example of using this would be to set some element’s width to 100% and add lateral padding to it. The default box-sizing would make the width be 100% plus the padding but using border-box would include the padding in the width. You can read more about it in this W3C working draft: CSS Basic User Interface Module Level 3 (CSS3 UI)

使用此功能的一个很好的例子是将某些元素的宽度设置为100％，并向其添加横向填充。 默认的框大小将使宽度为100％加上填充，但使用border-box将在宽度中包含填充。 您可以在此W3C工作草案中阅读有关它的更多信息： CSS Basic User Interface Module Level 3(CSS3 UI)

If you’re wondering about browser support, it is supported in every major browser, mobile ones included, excepted for Internet Explorer 7 and prior. A polyfill for those browsers exists if needed.

如果您对浏览器支持感到疑惑，除Internet Explorer 7和更低版本之外，所有主流浏览器(包括移动浏览器)都支持该浏览器。 如果需要，可以为这些浏览器提供一个polyfill 。

Note: it turns out that pseudo-elements are not included in the universal selector, so if you want your pseudo-elements to have a proper box-model like everything else, you should include them in the declaration.

注意：事实证明，伪元素不包含在通用选择器中，因此，如果您希望伪元素像其他所有元素一样具有适当的框模型，则应在声明中包含它们。

Let’s continue with another very popular one: the clearfix. You know the song: when an element only contains floated elements, it collapses on itself. To prevent this behavior, you have to “clearfix” it. We used to do it with an extra element, but not anymore.

让我们继续另一个非常流行的方法：clearfix。 您知道这首歌：当一个元素仅包含浮动元素时，它会自行折叠。 为防止此行为，您必须“清除”它。 我们曾经用一个额外的元素来做到这一点，但现在不再了。

.clearfix:before,
.clearfix:after {
	content: " ";
	display: table;
}

.clearfix:after {
	clear: both;
}

/* IE6/7 support */
.clearfix {
	*zoom: 1;
}

Note: The space content is one way to avoid an Opera bug when the contenteditable attribute is included anywhere else in the document. Otherwise it causes space to appear at the top and bottom of elements that are clearfixed.

注意：当contenteditable属性包含在文档中的其他任何位置时，空格内容是避免Opera错误的一种方法。 否则，它将导致空格出现在已固定的元素的顶部和底部。

Note: The use of display: table rather than display: block is only necessary if using the :before pseudo-element to contain the top-margins of child elements.

注意：仅当使用：before伪元素包含子元素的上边距时，才需要使用display: table而不是display: block 。

Enough with the common stuff, let’s get to something a little bit more underground!

普通的东西已经足够了，让我们深入地下吧！

.visuallyhidden {
	position: absolute;
	width: 1px; /* Setting this to 0 make it invisible for VoiceOver */
	height: 1px; /* Setting this to 0 make it invisible for VoiceOver */
	padding: 0;
    margin: -1px;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden;    
}

This is the “visually hidden” class taken from the HTML5BoilerPlate project. What’s the point when we have display: none you ask?

这是从HTML5BoilerPlate项目获取的“可视隐藏”类。 展示的目的是什么display: none您display: none要求？

Setting display: none hides content for screen readers and search engine bots. This is the difference that really matters. When you’re making tabs or playing with slideToggle(), don’t hide the content with display: none because you will make it unavailable for both, screen readers and search bots. Instead give it the previous class.

设置display: none隐藏屏幕阅读器和搜索引擎机器人的内容。 这是真正重要的区别。 制作选项卡或使用slideToggle() ，请不要在display: none隐藏内容display: none因为您将使屏幕阅读器和搜索bot均无法使用该内容。 而是给它上一堂课。

Note: as a further reading, I recommend this article from CSS-Tricks: Places It’s Tempting To Use Display: None; But Don’t.

注意：作为进一步阅读，我建议CSS-Tricks推荐这篇文章：使用显示的诱人位置：无； 但是不要。

While we are talking about hiding stuff, let’s deal with image replacement. We all know what image replacement is:

当我们谈论隐藏的东西时，让我们处理图像替换。 我们都知道什么是图像替换：

1. Take an element
   拿一个元素
2. Give it a background-image
   给它一个背景图片
3. Hide the text
   隐藏文字

Some of you have probably done this with position: absolute; left: -9999px; since the dawn of time. Yes, it works. But it’s incredibly heavy for the browser to create a 10000px box, so here is a “new” way of doing it by Scott Kellum:

你们中的某些人可能是通过以下position: absolute; left: -9999px;来做到这一点的position: absolute; left: -9999px; position: absolute; left: -9999px; 从时间的曙光。 是的，它有效。 但是对于浏览器来说，创建一个10000px的框非常繁重，因此，这是Scott Kellum的“新”方法：

.ir {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}

When you look at the code, this is incredibly clever. It only moves the text out of the box. Nothing more, nothing less.

当您查看代码时，这是非常聪明的。 它仅将文本移出框。 仅此而已。

Now we will see two snippets about long strings truncation: one preventing the text to break out of their container (such as an URL) by forcing the break. And one to make an ellipsis in case the string is too long for its container.

现在，我们将看到两个有关长字符串截断的摘录：一个通过强制break阻止文本从其容器(例如URL)中脱离出来。 如果字符串对于其容器而言过长，则可以省略号。

.break {
	-ms-word-break: break-all;
	word-break: break-all;

	word-break: break-word;

	-webkit-hyphens: auto;
	-moz-hyphens: auto;
	hyphens: auto;
}

.ellipsis {
	width: 250px;
	white-space: nowrap;
	overflow: hidden;
	-ms-text-overflow: ellipsis; /* Required for IE8 */
	-o-text-overflow: ellipsis; /* Required for Opera */
	text-overflow: ellipsis;
}

The first snippet (.break) works in Internet Explorer 8+, Firefox, Safari and Chrome. Sadly, it doesn’t work in Opera as far as I can tell. 🙁

第一个代码段(.break)可在Internet Explorer 8 +，Firefox，Safari和Chrome中使用。 不幸的是，据我所知，它在Opera中不起作用。 🙁

The second snippet (.ellipsis) works in Internet Explorer 8+, Safari, Opera and Chrome. Sadly, it doesn’t work in Firefox. However, a clever guy found a way to do it with some XML and the -moz-binding property.

第二个片段(.ellipsis)可在Internet Explorer 8 +，Safari，Opera和Chrome浏览器中使用。 可悲的是，它在Firefox中不起作用。 但是，一个聪明的人找到了一种使用XML和-moz-binding属性的方法。

Note: set the width of the .ellipsis element to suit your needs.

注意：设置.ellipsis元素的宽度以适合您的需求。

And to end this section while we are talking about text and co., let’s see how to make long strings break in <pre> tags.

在讨论文本和co。时结束本节，让我们看看如何在<pre>标记中使长字符串中断。

pre {
	white-space: pre-wrap;       /* Chrome & Safari */
	white-space: -moz-pre-wrap;  /* Mozilla since 1999 */
	white-space: -pre-wrap;      /* Opera 4-6 */
	white-space: -o-pre-wrap;    /* Opera 7 */
	word-wrap: break-word;       /* Internet Explorer 5.5+ */
}

This is from an older article from Tyler Longren where the author doesn’t talk much about Opera 8+. I made some searches, and it looks like Opera supports the word-wrap property so it should work like a charm.

这是来自Tyler Longren的较旧文章，在该文章中，作者并没有过多谈论Opera 8+。 我进行了一些搜索，看起来Opera支持字换行属性，因此它应该像魅力一样工作。

杂 (Miscellaneous)

For lack of a better name, I called this section “Miscellaneous”. It will contain various tips that you may or may not find useful depending on the project you’re working on.

由于缺乏更好的名字，我称此部分为“其他”。 它将包含各种提示，您可能会或可能不会发现有用的提示，具体取决于您正在处理的项目。

Let’s start with a few rules for print. Yes, I know most of you won’t care much about making your website look cool when printed but there are some projects where you have to, so:

让我们从一些打印规则开始。 是的，我知道你们中的大多数人都不太在乎让您的网站在打印时看起来很酷，但是您必须执行一些项目，所以：

@media print {
	* {
		background: none !important;
		color: black !important;
		box-shadow: none !important;
		text-shadow: none !important;

		/* Images, vectors and such */
		filter: Gray(); 						 /* IE4-8: depreciated */
		filter: url('desaturate.svg#grayscale'); /* SVG version for IE10, Firefox, Safari 5 and Opera */
		-webkit-filter: grayscale(100%); 		 /* Chrome + Safari 6 */
		-moz-filter: grayscale(100%); 			 /* Future proof */
		-ms-filter: grayscale(100%); 			 /* Future proof */
		-o-filter: grayscale(100%); 			 /* Future proof */
		filter: grayscale(100%); 				 /* Future proof or polyfilled */
	}

	a {
		text-decoration: underline;
	}

	a[href]:after {
		content: " (" attr(href) ")"; 
	}

	a[href="#"],
	a[href="javascript:"] {
		content: "";
	}
}

<!-- SVG version of grayscale filter: desaturate.svg -->
<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
	<filter id="grayscale">
		<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
			0.3333 0.3333 0.3333 0 0
			0.3333 0.3333 0.3333 0 0
			0  0  0  1 0"/>
	</filter>
</svg>

Okay, there are many things to note here. Let’s start with the color stuff. You have probably understood the point of turning everything into black and white: saving money. Do you know how much a color ink cartridge costs? 😀

好的，这里有很多事情要注意。 让我们从颜色开始。 您可能已经了解了将一切变成黑白的意义：省钱。 您知道彩色墨盒多少钱吗？ 😀

• The first four lines take care of 75% of the job by turning the font color to black and removing backgrounds and shadows.
  前四行通过将字体颜色变为黑色并去除背景和阴影来完成75％的工作。
• The filter stuff mostly takes care of images by desaturating them. Internet Explorer uses an old proprietary filter, Chrome supports new CSS3 filters and for the others there is SVG.
  过滤器材质通常通过使图像去饱和来处理图像。 Internet Explorer使用了旧的专有过滤器，Chrome支持新CSS3过滤器，其他的则是SVG。

• A few days ago Christian Schaefer released a JavaScript polyfill for CSS filters using the unprefixed syntax getting back to Internet Explorer 6 (!).

  几天前，Christian Schaefer使用无前缀的语法发布了用于CSS过滤器JavaScript polyfill，返回Internet Explorer 6(！)。

This was about the grayscale thing. Now, what about anchors?

这是关于灰度的事情。 现在，锚点呢？

• Since we removed colors, we’re back to the old-fashion way to show links: with an underline.
  由于我们删除了颜色，因此我们回到了显示链接的老式方式：带下划线。

• If anchors have a href attribute (and they should), we show their content after them.

  如果锚点具有href属性(并且应该具有)，我们将在其后显示其内容。

• But not if it’s a JavaScript or an empty link.
  但如果是JavaScript或空链接，则不会。

Note: HTML5BoilerPlate provides a very powerful print style sheet.

注意：HTML5BoilerPlate提供了非常强大的打印样式表。

Enough with the print. Let’s talk about something very trendy. Yes, you know what I’m talking about: retina displays! You know, those sweet little devices with a high resolution forcing us to recreate all of ours images twice as big. 🙂

足够打印。 让我们谈谈一些非常时髦的东西。 是的，您知道我在说什么：视网膜显示器！ 您知道，那些具有高分辨率的可爱小设备迫使我们重新创建所有图像的两倍。 🙂

Anyway, you may want to target only retina displays with CSS in order to, let’s say, override background images, or similar. There you go:

无论如何，您可能只想使用CSS定位视网膜显示器，以便覆盖背景图片或类似图片。 你去了：

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2), /* Looks like a bug, so may want to add: */
only screen and (   -moz-min-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	/* Your retina specific stuff here */
}

Note: Chris Coyier recently updated his blog post about it so you may want to have a look at it.

注意：Chris Coyier最近更新了有关它的博客文章，因此您可能想看看它。

Last, for the miscellaneous section, a CSS diagnostic snippet. Maybe you haven’t heard about it so much since it’s not really common. The idea, is to provide a block of code you activate when you want to do a little “validation” of your markup. Eric Meyer and Neil Grosskopf have provided some excellent resources.

最后，对于其他部分，是CSS诊断代码段。 也许您没有听说太多，因为它并不常见。 这个想法是要在您想对标记做一些“验证”时提供您激活的代码块。 Eric Meyer和Neil Grosskopf提供了一些出色的资源。

/* Empty Elements */
.debug div:empty, .debug span:empty,.debug li:empty,.debug p:empty,.debug td:empty,.debug th:empty { 
	padding: 20px; 
	border: 5px dotted yellow !important;
}

/* Empty Attributes */
.debug *[alt=""], .debug *[title=""], .debug *[class=""], .debug *[id=""], .debug a[href=""] { 
	border: 5px solid yellow !important;
}

/* Deprecated Elements */
.debug applet, .debug basefont, .debug center, .debug dir, .debug font, .debug isindex, .debug menu, .debug s, .debug strike, .debug u {
	border: 5px dotted red !important;
}

/* Deprecated Attributes */
.debug *[background], .debug *[bgcolor], .debug *[clear], .debug *[color], .debug *[compact], .debug *[noshade], .debug *[nowrap], .debug *[size], .debug *[start],.debug *[bottommargin], .debug *[leftmargin], .debug *[rightmargin], .debug *[topmargin], .debug *[marginheight], .debug *[marginwidth], .debug *[alink], .debug *[link], .debug *[text], .debug *[vlink],.debug *[align], .debug *[valign],.debug *[hspace], .debug *[vspace],.debug *[height], .debug *[width],.debug ul[type], .debug ol[type], .debug li[type] {
	border: 5px solid red !important;
}

/* Proposed Deprecated Elements */
.debug input[type="button"], .debug big, .debug tt {
	border: 5px dotted #33FF00 !important;
}

/* Proposed Deprecated Attributes */
.debug *[border], .debug table[cellpadding], .debug table[cellspacing] { 
	border: 5px solid #33FF00 !important;
}

Basically, you add the .debug class to the root of the document (the html element) and depending on your markup, you may see some elements bordered. From there, you decide what to do. 😉

基本上，您将.debug类添加到文档的根目录( html元素)，并且根据您的标记，可能会看到一些带有边框的元素。 从那里，您决定要做什么。 😉

Important: this doesn’t guarantee you to have a valid markup. In order to do this, please use the W3C validator.

重要提示：这不能保证您拥有有效的标记。 为此，请使用W3C验证器。

Note: to improve the quality of your CSS, please have a look at CSSLint.

注意：为了提高CSS的质量，请查看CSSLint 。

Mixins(CSS预处理器) (Mixins (CSS preprocessors))

In the first part of this tutorial, we saw a lot of things you can add in your style sheet in order to ease the development process. I think it’s time to have a slight glance at CSS preprocessors-related snippets.

在本教程的第一部分，我们看到了很多可以添加到样式表中的内容，以简化开发过程。 我认为是时候稍微看一下与CSS预处理器相关的摘要了。

Important: I won’t explain in detail what CSS preprocessors are, nor will I try to convince you to use one, or use a specific one.

重要说明：我不会详细解释什么是CSS预处理器，也不会试图说服您使用一个或特定的预处理器。

A CSS preprocessor allows you to use variables, mixins, functions, operations, nesting, importing and much more. For that concern, I personally use LESS but there are also Sass or Stylus which might fit your needs.

CSS预处理器允许您使用变量，混合，函数，操作，嵌套，导入等。 为此，我个人使用了LESS，但是也有Sass或Stylus可以满足您的需求。

Anyway, I’m only going to talk about mixins here. Mixins are like variables but for whole classes. The best point of mixins is that they can behave like functions and have parameters.

无论如何，我只在这里谈论mixin。 Mixins就像变量，但适用于整个类。 mixin的最好之处在于它们的行为类似于函数并具有参数。

Let’s start with something very simple: a mixin to handle all vendor prefixes whenever you want to apply a transform to an element.

让我们从一个非常简单的事情开始：每当您想对元素应用转换时，一个混合处理所有供应商前缀。

.transform(@string) {
	-webkit-transform:  @string;
	-moz-transform: 	@string;
	-ms-transform: 		@string;
	-o-transform: 		@string;
	transform: 			@string;
}

Okay, that was just to show you the idea. Maybe we could build a mixin for every kind of transform? Or at least the most used ones?

好的，那只是为了向您展示这个想法。 也许我们可以为每种转换构建一个mixin？ 或至少是最常用的？

.rotate(@deg) {
	-webkit-transform:  rotate(@deg);
	-moz-transform: 	rotate(@deg);
	-ms-transform: 		rotate(@deg);
	-o-transform: 		rotate(@deg);
	transform: 			rotate(@deg);
}

.scale(@factor) {
	-webkit-transform:  scale(@factor);
	-moz-transform: 	scale(@factor);
	-ms-transform: 		scale(@factor);
	-o-transform: 		scale(@factor);
	transform: 		 	scale(@factor);
}

.translate (@x, @y) {
	-webkit-transform:  translate(@x, @y);
	-moz-transform: 	translate(@x, @y);
	-ms-transform: 		translate(@x, @y);
	-o-transform: 		translate(@x, @y);
	transform: 		 	translate(@x, @y);
}

The only point of those mixins is to avoid writing vendor prefixes. Let’s go up a level.

这些mixin的唯一目的是避免编写供应商前缀。 让我们上一个台阶。

.transition(@string: all 0.3s ease-out) {
	-webkit-transition: @string;
	-moz-transition: 	@string;
	-ms-transition: 	@string;
	-o-transition: 		@string;
	transition: 		@string;
}

What does this mixin do exactly? It takes as a value all 0.3s ease-out if no value is specified. This is where it’s getting interesting. From now on (unless I want a very specific transition) I don’t have to set a value to transition anymore. I only have to do this:

这个mixin到底做什么？ 如果未指定任何值all 0.3s ease-out则将all 0.3s ease-out值。 这就是它变得有趣的地方。 从现在开始(除非我想要一个非常具体的过渡)，我不必再为过渡设置值。 我只需要这样做：

.my-element {
	.transition;
}

/* Output CSS */

.my-element {
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}

Another example would be to create a mixin that handles the box-sizing property with a default parameter. Something like:

另一个示例是创建一个用于处理具有默认参数的box-sizing属性的mixin。 就像是：

.box-sizing(@value: border-box) {
	-webkit-box-sizing: @value;
	-moz-box-sizing:	@value;
	-box-sizing: 		@value;
}

*, *:before, *:after {
	.box-sizing;
}

/* Output CSS */

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

We often associate preprocessors with CSS3, mostly because of the power of these previous examples, but you can of course, do perfectly valid CSS2.1 with preprocessors and find plenty of cases where you might “need” them. Please, have a look at the following code:

我们经常将预处理器与CSS3关联起来，主要是因为这些示例的功能强大，但是您当然可以将预处理器与CSS2.1完美结合​​，并发现很多可能需要“预处理器”的情况。 请看下面的代码：

.placement(@top, @right, @bottom, @left) {
	top: @top;
	right: @right;
	bottom: @bottom;
	left: @left;
}

.my-element {
	position: absolute;
	.placement(0, 0, 0, 0);
}

/* Output CSS */

.my-element {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

How cool is that? I’ve waited for ages to have a shorthand for this. I always found it annoying to have to type the 4 placement properties over and over again. We could even tweak it to include the type of position.

多么酷啊？ 我已经等了很长时间才有了这个简写。 我总是发现必须一遍又一遍地键入4个放置属性很烦人。 我们甚至可以对其进行调整，以包括头寸类型。

.placement(@type, @top, @right, @bottom, @left) {
	position: @type;
	top: @top;
	right: @right;
	bottom: @bottom;
	left: @left;
}

.my-element {
	.placement(absolute, 0, 0, 0, 0);
}

/* Output CSS */

.my-element {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}

I’d like to end with a very useful mixin mixing (see what I did there?) CSS2.1 and CSS3 in order to provide something which could be very annoying to do manually: a rem/px converter.

我想结束一个非常有用的混合混入(请参阅我在那做的事情？)CSS2.1和CSS3，以便提供一些可能非常烦人的手动操作：rem / px转换器。

Rem stands for “root em”. Its behavior is similar to the em unit except that it’s relative to the root element, not its parent element. Every major browser now supports it except Opera Mini and Internet Explorer 6/7. For those browsers, we have to provide a fallback in px.

Rem代表“ root em”。 它的行为与em单元相似，除了它是相对于根元素而不是其父元素而言。 现在，除Opera Mini和Internet Explorer 6/7之外，所有主流浏览器都支持它。 对于这些浏览器，我们必须以px为单位提供备用。

.font-size($pxValue){
	@remValue: (@pxValue / 10);
	font-size: ~"@{pxValue}px";
	font-size: ~"@{remValue}rem";
}

html { font-size: 62.5%; }

.my-element {
	.font-size(13px);
}

/* Output CSS */

.my-element {
	font-size: 13px;   /* Internet Explorer 6/7/8 + Opera Mini */
	font-size: 1.3rem; /* Other browsers */
}

Basically, you set the font-size you want in pixels, and it gives you both px and rem. Easy peasy, end of story.

基本上，您可以设置所需的字体大小(以像素为单位)，它可以同时提供px和rem。 轻松自在，故事的结局。

Note: the font-size: 62.5% thing on the html element is for switching to base 10 for the ease of calculations (default 16px * 62.5 / 100 = 10). From there, it’s easy to say 1.3rem + 13px.

注意： font-size: 62.5% html元素上font-size: 62.5%的内容是为了简化计算而切换到基数10(默认为16px * 62.5 / 100 = 10)。 从那里开始，很容易说出1.3rem + 13px。

最后的话 (Final words)

As a final word, I will encourage you to create your own CSS snippets, whatever they are, as long as they increase your productivity and ease of development. Be sure to share them! 😉

最后，我鼓励您创建自己CSS代码段，无论它们是什么，只要它们可以提高您的工作效率并简化开发即可。 请务必分享！ 😉

Believe me or not, I code much faster since I started to do those things. I’m not even talking about CSS preprocessors here. I’m talking about making some default classes in order not to boot from scratch.

信不信由你，自从我开始做那些事情以来，我的编码速度就快得多。 我什至没有在这里谈论CSS预处理器。 我正在谈论制作一些默认类，以免从头启动。

And if you’re using a CSS preprocessor, be sure to create a bunch of mixins to start your project with a solid basis. From there, CSS becomes a game again. 😉

而且，如果您使用的是CSS预处理器，请确保创建一堆mixins以扎实地启动您的项目。 从那里开始，CSS再次成为一种游戏。 😉

If you’d like to download the CSS and LESS files with the snippets we have discussed, here you go: Download Snippet Files

如果要下载我们讨论过的代码片段CSS和LESS文件，请按以下步骤操作：下载代码片段文件

学分(Credits)

We spoke about a bunch of topics today, so here are some useful resources and references:

我们今天讨论了很多主题，因此这里有一些有用的资源和参考资料：

• Revised Font Stack by Amrinder Sandhu and the really useful Gist by Jon Buda

  Amrinder Sandhu修订的字体堆栈和Jon Buda的真正有用的Gist

• CSS Font Stack by Studio Snapsize, a handy tool for quickly getting font stacks

  Studio Snapsize的CSS字体堆栈，可快速获取字体堆栈的便捷工具

• “Increasing the clickable area of inline links” by Joshua Hibbert

  约书亚·希伯特(Joshua Hibbert)“增加内联链接的可点击区域”

• “Box-sizing FTW!” by Paul Irish

  “盒子大小的FTW！” 通过保罗·爱尔兰

• ‘box-sizing’ property in the W3C working draft of “CSS Basic User Interface Module Level 3 (CSS3 UI)”

  W3C工作草案“ CSS基本用户界面模块级别3(CSS3 UI)”中的“ box-sizing”属性

• Browser support for the box-sizing property

  浏览器对box-sizing属性的支持

• Polyfill for the box-sizing property by Christian Schaefer

  克里斯蒂安·谢弗(Christian Schaefer)的保鲜盒

• The “new” clearfix hack by Nicolas Gallagher

  Nicolas Gallagher的“新” clearfix黑客

• HTML5 Boiler Plate

  HTML5锅炉板

• “Place it’s tempting to use display: none but don’t” by Chris Coyier

  克里斯·科耶尔(Chris Coyier)的“使用展示的诱人之处：没有但没有”

• The “new” image replacement by Scott Kellum

  Scott Kellum的“新”图像替换

• Wrapping Long URLs and Text Content with CSS by Jeff Starr

  Jeff Starr用CSS包装长URL和文本内容

• Text-overflow: ellipsis on Firefox by Matt Snider

  文字溢出：Matt Snider在Firefox上使用省略号

• Wrapping Text Inside Pre Tags by Tyler Longren

  在泰勒·朗伦的预标签内包装文字

• CSS3 Text Module support in Opera

  Opera中CSS3文本模块支持

• Polyfill for CSS filters by Christian Schaefer

  Christian SchaeferCSS过滤器Polyfill

• Retina Display Media-Queries by Chris Coyier

  视网膜显示媒体查询Chris Coyier

• CSS Diagnostic by Eric Meyer

  Eric MeyerCSS诊断

• “A Second Look At CSS Diagnostics” by Neil Grosskopf

  Neil Grosskopf的“ CSS诊断的第二眼”

• Validator W3C

  验证器W3C

• CSSLint

  CSSLint

• LESS

  减

• Stylus

  触控笔

翻译自: https://tympanus.net/codrops/2012/10/25/kick-start-your-project-a-collection-of-handy-css-snippets/

超实用的css代码段