空的 div 不好吗? [英] Are empty divs bad?

问题描述

我正在 Aptana 中创建一个网站，并且我正在使用一个空的 div 元素来设置边框底部的样式.

我无法将其作为边框元素的一部分，因为它需要始终具有相同的宽度，而且假定的父元素实际上会根据内容更改大小.

问题是:像这样使用空的 div 是不是很糟糕?Aptana 给了我一个警告.它说我应该修剪空的 div".

我在这里谈论的是showinfo-border-left/right"类的 div

<div class="showinfo-left">Text</div><div class="showinfo-right">更多文字</div>
<div class="showinfo-border-left"></div><div class="showinfo-border-right"></div>

解决方案

来自 Best Practices for Speeding上你的网页

减少 DOM 元素的数量

复杂的页面意味着要下载更多字节，也意味着 JavaScript 中的 DOM 访问速度较慢.例如，当您想要添加事件处理程序时，如果您在页面上循环遍历 500 或 5000 个 DOM 元素，这会有所不同.大量的 DOM 元素可能是一种症状，即应该通过页面标记改进某些内容，而不必删除内容.您是否使用嵌套表格进行布局?您是否投入更多

只是为了解决布局问题?也许有一种更好、语义更正确的方法来做你的标记.YUI CSS 实用程序对布局有很大帮助:grids.css 可以帮助您进行整体布局，fonts.css 和 reset.css 可以帮助您去除浏览器的默认格式.这是一个重新开始并考虑您的标记的机会，例如，仅在语义上有意义时才使用 <div>s，而不是因为它呈现一个新行.DOM 元素的数量很容易测试，只需在 Firebug 的控制台中输入:document.getElementsByTagName('*').length有多少 DOM 元素太多了?检查其他具有良好标记的类似页面.例如雅虎！主页是一个非常繁忙的页面，仍然少于 700 个元素(HTML 标签).

I'm making a website in Aptana and i'm using an empty div element for the styling of a border-bottom.

I couldn't make it part of the element it's a border of because it needs to have the same width all the time and that supposed parent element in fact changes size depending on the content.

Question being: Is it bad to use empty divs like this? Aptana gives me a warning. It says i "should trim empty div".

I'm talking about the divs down here with the class "showinfo-border-left/right"

<div class="showinfo">
    <div class="showinfo-left">Text</div>
    <div class="showinfo-right">More text</div>
</div>
    <div class="showinfo-border-left"></div>
    <div class="showinfo-border-right"></div>

解决方案

From Best Practices for Speeding Up your Webpage

Reduce the Number of DOM Elements

A complex page means more bytes to download and it also means slower DOM access in JavaScript. It makes a difference if you loop through 500 or 5000 DOM elements on the page when you want to add an event handler for example. A high number of DOM elements can be a symptom that there's something that should be improved with the markup of the page without necessarily removing content. Are you using nested tables for layout purposes? Are you throwing in more <div>s only to fix layout issues? Maybe there's a better and more semantically correct way to do your markup. A great help with layouts are the YUI CSS utilities: grids.css can help you with the overall layout, fonts.css and reset.css can help you strip away the browser's defaults formatting. This is a chance to start fresh and think about your markup, for example use <div>s only when it makes sense semantically, and not because it renders a new line. The number of DOM elements is easy to test, just type in Firebug's console: document.getElementsByTagName('*').length And how many DOM elements are too many? Check other similar pages that have good markup. For example the Yahoo! Home Page is a pretty busy page and still under 700 elements (HTML tags).

这篇关于空的 div 不好吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！