当前位置：文档之家 › CSS网页制作教程：CSS语义化的类名

CSS网页制作教程：CSS语义化的类名

  • 格式：wps
  • 大小：73.00 KB
  • 文档页数：5

语义总是个火热的话题。

有些人时时刻刻在追求语义化，有些人教条地执着于它，而有一些人不知道这究竟是什么。

我认为语义像标签、类、ID 、属性（描述而不是定义内容）一样和HTML 密切相关。

我们用典型的例子来描述。

糟糕的语义： 1 2 3 4 5 <;div class="article">;<;div class="article_title">;Smurf Movie Kinda Sucks<;/div>;<;div class="the_content">;Not surprisingly, this weeks release of<;div class="darkbold">;The Smurfs<;/div>; kinda sucks.<;/div>;<;/div>;好的语义：1 2 3 4 5 <;article>;<;h1>;Smurf Movie Kinda Sucks<;/h1>;<;p>;Not surprisingly, this weeks release of<;b>;The Smurfs<;/b>; kinda sucks.<;/p>;<;/article>;不管你是否准备好迎接HTML5，当你需要一个HTML 元素来定义文章，那么article 标签比div 加上类名article 好。

文章的标题成了header 内容变成锻炼，加粗但不强调的标题变成了加粗的标签。

但是，并不是所有的都这么简单。

我们来看看一些类名的对比，关于语义或不语义我提出了我的观点。

1 <;div class="column_1">;<;/div>;非语义化。

这是典型的例子，几乎每个CSS 栅格框架都用这类的类名来声明栅格。

不管是”yui -b”、”grid -4″或者”spanHalf”，这些都更像是定义，而不是描述该内容。

所以，我觉得这些都不是语义化的类名，但是我同时觉得，在基于浮动的栅格系统布局中，我们没办法广泛地避免这点。

1 <;div class="footer">;<;/div>;语义化。

footer 是个抽象的内容，但是在Web 设计中，已经被赋予了一定的意义。

它是置于网站底部的模块，通常包含导航，版权，作者信息等等。

这个类名包含这么一组信息，而并没有描述它的内容。

如果你准备迎接HTML5，那么footer元素是更好的选择。

对于所有的HTML5元素都是如此。

（头部header，而侧栏应该用aside等。

）如果你还没使用HTML5（你最好有个很好的理由），那么最好使用同等的类名。

<;div class="largeText">;<;/div>;1非语义化。

这是在定义，为什么文本会是大的？来突出显示？那么”standOut”或“callout_text”会好一些，因为在下次改版的时候，你可能会选择另外的方式让这个文本更加的突出，而不是文本更大，那这个类名看起来就不会太尴尬。

<;div class="priority-2">;<;/div>;1语义化。

我和MailChimp的Jason Beaird和Aarron Walter谈过这点，他们就是这样声明不同层级的按钮（类名更多的用”p1″..”p5″之类的）。

更高曾记得按钮可能是更亮更大，而低层级的按钮可能是混于内容之中，比较平淡。

不使用内容本身的样式来声明层级，就是语义化。

这和h1、h2、h3的道理一样。

<;div class="copyright">;<;/div>;1语义化。

如果每个类名都这么简单就好了！这个可以用于包含“tweets”、“pagination”或“admin-bar”的模块。

这最后的一个”admin-bar”或者应该叫”admin-nav”，在Theoretical Redesign Future里面提到，这不应该再是bar。

<;p class="introp">;<;/p>;1非语义化。

Dave Rupert有一次开玩笑说，这是他最喜欢的类名。

定义页面第一段的特别的样式，这是很常见的场景，就好像概览，把观众吸引到内容上。

如果你要很好的浏览器支持，你可能会需要一些类名，我觉得”intro”比”introp”会更好一些（不要使用元素的名字）。

更好的方法是，使用样式来针对第一段如articlep:first-of-type或h1 + p。

<;div class="clearfix">;<;/div>;1非语义化。

这是个非常常见的类名，这是个清浮动的技巧，该元素包含它的子级浮动元素，不让它崩溃。

但是，这个类名跟它的内容毫无关系，不可避免地不语义。

Dan Cederholm推荐一个感觉比较好的类名”group”来替代（详见他的书Handcrafted CSS）。

对我来说，考虑类名的语义化，这个元素包含很多的元素，所以成为”group”（描述而不是定义）。

<;div class="left">;<;/div>;1非语义化。

在后续版本中，你可能会把它放到右边，太过特征化。

<;div class="success">;<;/div>;1语义化。

这在混合词汇中用得很好，混合词汇的类名，其中一个词是描述内容，而另外一个是描述内容的状态，如”success message”，可以代表如”您的文件已上传”之类的信息。

如果信息是”上传文件出错”，那么类名可以变成是”fail message”，然后有对应的样式。

<;div class="plain-jane">;<;/div>;1非语义化。

这个类在定义某部分的内容应该有着不同的样式。

“plain-jane”想用来描述”normal”或”regular”。

理想的情况是，CSS应该写得更好，你不需要定义一个”regular”的样式，而是通过继承来实现，而对于那些更加突出的内容则用特别的样式。

<;div class="entry-unrelated">;<;/div>;1非语义化。

Readability，是个Web 应用程序，可以调整格式并网页保存，便于阅读。

它使用这个类名来定义那些不需要包含在保存的网页中的元素。

我这里说它不语义的原因是，这个类名在描述”不是什么”而非”是什么”。

我希望有个其它的类名来表达这个目的。

就如link当中的rel=nofollow，而不是内容。

<;div class="hyphenate">;<;/div>;1非语义化。

定义内容的行为，而不是描述它是什么。

<;a class="link" href="#">;<;/a>;1非语义化。

链接不需要定义为链接，它本身就是一个链接，所以，这是不必要的。

如果这个类名要定义的内容是要区别于其它的链接，那么用描述型的方式会好一些，如”book-link”或者（尚有争议的）”button”。

然而，在某些实际情况下。

让我们看看你有两种文章样式，你要分别定义它们。

Movie Reviews 有蓝色背景，而Breaking News 有红色背景以及更大的字号。

一种方式是这样： 1 2 3 4 5 6 7<;article class="movie-review">;...<;/article>;<;article class="breaking-news">;...<;/article>;另一种方式是这样： 1 2 3 4 5 6 7<;article class="blueBg">;...<;/article>;<;article class="redBg bigText">;...<;/article>;如果我们有个投票，让大家选哪个更加语义化，我打赌，一定是第一个赢了。

它实践了这个理念：描述而非定义。

第二个的类名定义了蓝色背景等样式。

让我们假设Theoretical Redesign Future™不是理论上的而是实际的。

设计Movie Reviews 的样式变成了绿色背景。

那么类名blueBg 显得不适宜了。

然而movie-review 是完全没有问题，你只需要对它的样式进行属性或属性值的修改就行。

但是这也并不代表第一个总是对的，要看实际情况。

假设这个蓝色应用在网站的很多地方，可能是页脚或者侧栏的样式，那么你会这样写选择器：1 2 3 4 5 .movie-review,footer >; div:nth-of-type(2),aside >; div:nth-of-type(4) {background:#c2fbff;}这样很方便，因为你只要定义颜色一次。

但是也可能比较复杂，就是每个选择器又有它单独的一些样式，所以它们要分开，或许你会用另外的方法如下把选择器分开写： 12345 6 7 8 9 10 11 121314.movie-review {background:#c2fbff;/* Plus other stuff */}footer >; div:nth-of-type(2) {background:#c2fbff;/* Plus other stuff */}aside >; div:nth-of-type(4) {background:#c2fbff;/* Plus other stuff */} 这样CSS 文件会比较有组织（不同的内容部分对应不同的样式区块），但是前提是重复声明的代价。

在CSS Summit 上，Nicole Sullivan 的一个演讲中，她提出大公司声明同样的颜色有上千次，但是没人用blueBg 之类的类名。

合集下载

css命名及书写规范

css命名及书写规范

css命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。

完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。

完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。

css中class的用法

css中class的用法

css中class的用法CSS（Cascading Style Sheets）是一种用于描述HTML（HyperText Markup Language）文档样式的语言。

在CSS中，我们可以使用class来定义一组具有相同样式属性的元素，以便于管理和复用样式。

下面我们将详细介绍class在CSS中的用法。

一、定义class在HTML中，我们可以使用class属性来为元素定义一个类名。

类名可以使用连字符或下划线分隔，并且不能包含空格。

例如，我们可以为一段文本定义一个名为"my-text"的class：```html<p class="my-text">这是一段带有my-text类的文本。

</p>```二、使用class在CSS中，我们可以使用类选择器来选择具有特定类名的元素，并为其指定样式属性。

类选择器由一个点号和一个类名组成。

例如，要为具有my-text类的元素设置字体颜色为红色，我们可以使用以下CSS代码：```css.my-text {color: red;}```这将把所有具有my-text类的元素字体颜色设置为红色。

三、类名的应用场景类名在CSS中有很多应用场景，例如：1. 复用样式：通过定义一组具有相同样式的元素，我们可以复用这些样式，减少代码冗余，提高开发效率。

2. 样式分组：可以将具有相似样式的元素分组，方便管理。

例如，可以将具有相同背景颜色的元素放在一个组中，并为其定义一个类名。

3. 响应式设计：可以通过定义不同的类名来适应不同的屏幕尺寸和设备类型，实现响应式设计。

4. 定制化设计：可以为不同的人群或特定场景定义不同的类名，实现定制化设计。

四、注意事项在使用class时，需要注意以下几点：1. 类名应尽量简短且具有描述性，避免使用过于模糊或难以理解的类名。

2. 在使用类选择器时，应注意避免选择器之间的冲突，如避免使用相同类名的元素。

列举常见的语义化模块并作解释

列举常见的语义化模块并作解释

列举常见的语义化模块并作解释语义化模块是前端开发中非常重要的概念之一，它可以帮助我们更好地理解和使用HTML标记语言。

在本文中，我将列举并解释一些常见的语义化模块，以便读者能够全面了解它们的作用和用法。

1. <header> 标签：这个标签用于表示页面或文章的标题栏，通常包含网站的标识、页面的标题以及导航菜单等重要内容。

通过使用<header>标签，我们可以让浏览器更好地识别和解释这个区域的作用。

2. <nav> 标签：这个标签用于表示页面的导航区域，通常包含网站的主导航菜单。

使用<nav>标签而不是<div>等普通容器可以提供额外的语义化信息，帮助搜索引擎和屏幕阅读器更好地理解网页结构。

3. <article> 标签：这个标签用于表示独立、完整且可独立使用的内容块，比如新闻文章、博客文章等。

通过使用<article>标签，我们可以告诉浏览器这是一个独立的文章，有助于改善搜索引擎的索引和阅读体验。

4. <section> 标签：这个标签用于将页面内容划分为逻辑上相关的部分。

一个<section>可以包含一个或多个语义化标签，比如<article>、<header>、<footer>等。

通过使用<section>标签，我们可以更好地组织页面结构，使其更具语义化，并帮助提高可访问性。

5. <aside> 标签：这个标签用于表示页面的侧边栏或辅助内容。

通常在使用<aside>标签时，被包含的内容应该是与正文内容相关但不是主要的信息，比如广告、相关链接、作者简介等。

6. <footer> 标签：这个标签用于表示页面的底部区域，通常包含版权信息、通信方式等。

使用<footer>标签可以使底部区域更具语义化，并提高可访问性。

css中class的命名规则

css中class的命名规则

css中class的命名规则CSS中class的命名规则可以参考以下几点：1. 为了增加代码的可读性和可维护性，class的命名应该具有描述性，能够准确地表示该元素的作用或特征。

可以使用有意义的名词、形容词或动词短语来命名，避免使用无意义的字符或数字。

2. class的命名应具备一定的层级结构，以便于理解和组织样式。

可以使用连字符或下划线来分隔不同层级的名词，如`.header-nav`或`.header_nav`。

3. 避免使用过长的class命名，一般不建议超过三个单词。

可以使用缩写或简化的词汇来表示，但要确保不会造成混淆。

4. 尽量使用具体的名词来描述元素的作用，而不是使用抽象的词汇。

例如，使用`.btn`表示按钮，而不是使用`.click`或`.action`。

5. 在命名class时，可以根据元素的用途或功能来添加前缀，以避免与其他元素的class冲突。

例如，使用`.sidebar-`作为侧边栏相关元素的前缀。

6. 避免使用纯数字或纯字母的class命名，以防止与其他命名规则冲突。

7. 在命名class时，可以使用BEM（Block Element Modifier）方法来表示元素的层次关系和状态。

例如，`.block`表示块级元素，`.block__element`表示元素，`.block--modifier`表示元素的状态或变体。

8. 尽量避免使用过于具体或具有限制性的命名，以增加代码的灵活性和可复用性。

例如，使用`.red-text`表示红色文本，而不是`.error-text`，因为后者只能用于表示错误信息。

9. 在命名class时，可以使用命名空间来表示不同的模块或组件。

例如，使用`.header-`作为头部模块的命名空间，使用`.footer-`作为底部模块的命名空间。

10. 最后，要遵循团队内部的命名约定和规范，以确保代码的一致性和可维护性。

以上是关于CSS中class的命名规则的一些建议，希望能对你的创作有所帮助。