Menu
Woocommerce Menu

给初学者的20个CSS实用建议,类名设计

0 Comment


浅析 Bootstrap 的 CSS 类名设计

2014/05/08 · CSS ·
CSS

本文由 伯乐在线 –
CSS魔法
翻译。未经许可,禁止转载!
英文出处:markdotto。欢迎加入翻译组。

译者注:最近在重新设计一个 UI
框架,因此也在考察一些类似项目的特征和要素。在读到《Bootstrap
编码规范》时,顺着链接发现了其作者 @mdo 的一篇文章,其中讲到 CSS
类名的设计思路。

在构建类似 Bootstrap 这样的 CSS
系统时,保持系统的简单性、稳定性、灵活性是相当重要的。这并非易事,尤其对于大型团队和项目来说,组件的数量可能会变得相当庞大。为了改善这种状况,你不妨考虑用前缀式类名取代链式类名。

在使用 链式类名 方案时,你可能会把一系列特定组件的 CSS
选择符写成这样:

CSS

.success { … } .btn.success { .. } .alert.success { … }

1
2
3
.success { … }
.btn.success { .. }
.alert.success { … }

我们在这里设置了一个全局基础类
.success,它可能涵盖了成功按钮和成功提示框之间的所有共性。然后,在单个组件层面,我们又需要对它进行扩充或覆盖。但是,这种完全开放式的类名和链式风格令开发者面临一些困扰和潜在痛点:

  • 这个基础类到底代表什么
  • 哪些元素会在根层级受到影响(译注:啥意思?)
  • 哪些元素可以把 .success 类链到自己身上
  • 它是否可以被进一步扩展到更多的组件上
  • 假如一个 .success
    的实例要用白底绿字,而另一个要用绿底白字,怎么办?

而且这些问题还只是冰山一角。这种方案未必很差,但如果可扩展性、简单性和灵活性是你的最高需求,这可能就不是最好的办法。此时,前缀式类名方案可能更加适合你。

前缀式类名
将开发者引入一种更简单、更易维护的方向,从而构建一个可扩展的 CSS
系统。当我们抛弃常规的基础类的方式,并将每个组件的样式用前缀限制起来时,我们的代码会变成这样:

CSS

.btn-success { … } .alert-success { … }

1
2
.btn-success { … }
.alert-success { … }

这样一来,基础类被设定在组件级别,而不是整个系统级别。换句话说,我们的基础类变成了
.btn.alert,而不是
.success。所有组件之间都不会出现样式和行为上的相互干扰,因为我们把组件具备“成功状态”视为贯穿整个系统的一种概念。这就是说,每个组件在“成功”状态下的样式,只有在
概念 层面才是相通的;而对于如何 实现
这个样式,是被约束在每个独立的组件内部的。不用操心通用的样式还会在哪里使用,也不用顾虑不可意料的副作用,这种方式使得每个组件更加稳定和灵活。

构建组件是一项非常具有策略性并且注重细节的工作,在一个类似 Bootstrap
的系统中,组件需要天生具备独立性,以提高模块分离度和可定制性。我们通过这种方式来打造更好的代码和一个令人愉悦的项目。


解耦 HTML、CSS 和 JavaScript

2013/06/22 · CSS,
JavaScript · 2
评论 ·
CSS,
Javascript

本文由 伯乐在线 –
蝈蝈
翻译。未经许可,禁止转载!
英文出处:Philip
Walton。欢迎加入翻译组。

当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript。随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需要的。

当今的一些大型互联网公司,由于越来越多的人会接触到日益增加的前端代码,它们会试图去坚持代码的模块化。这样更改程序的部分代码,并不会无意中过多地影响后续不相关部分的执行过程。

防止意想不到的后果不是一个容易解决的问题,尤其是HTML,CSS和JavaScript本质上是相互依赖的。更糟糕的是,当涉及到前端代码时,一些传统计算机科学原则,比如关注分离,这一长期运用在服务端开发中,很少会讨论到。

在本文中,我将会讲讲我所学到的如何去解耦我的HTML,CSS和JavaScript代码。从个人以及他人经验所得,这种的最好办法并不是那么显而易见,而通常是不直观的,而且有时还会与许多所谓的最佳实践相违背。

给初学者的20个CSS实用建议

2013/02/04 · CSS · 3
评论 ·
CSS

英文原文:20-useful-css-tips-for-beginners,编译:杨礼鑫

过去就连一个镜像站点,我们都依靠大量的开发人员和程序员进行维护。得益于CSS和它的灵活性使得样式能够从代码中被独立抽离出来,从而让一个只具备基本CSS理论的初学者都能够轻易地改变网站的样式。

不论你是对用CSS建站感兴趣还是仅仅拿它让你的博客更有feel,打好基础才能盖高楼。下面让我们来看看一些对于初学者实用的CSS常识:

1、使用reset.css

火狐和IE这两种不同的浏览器,在绘制CSS样式方法上截然不同。这种情况下,使用reset.css重置所有的基本样式会让你得到一个全新的空样式表。

这儿有一些常用的reset.css框架——Yahoo Reset
CSS
Eric Meyer’s CSS
Reset
Tripoli

2、CSS缩写

CSS缩写简化了你的CSS代码,更重要的是,它让你的代码更加整洁易懂。

不是像这样创建CSS

CSS

.header { background-color: #fff; background-image: url(image.gif);
background-repeat: no-repeat; background-position: top left; }

1
2
3
4
5
6
7
.header {
  background-color: #fff;
  background-image: url(image.gif);
  background-repeat: no-repeat;
  background-position: top left;
 
}

而是像这样创建CSS

CSS

.header { background: #fff url(image.gif) no-repeat top left }

1
2
3
.header {
  background: #fff url(image.gif) no-repeat top left  
}

 

3、理解class和id

这两个选择器总是让初学者感到迷惑。在CSS中,Class和ID分别用点“.”和井号“#”来标识。简单来说id就是用来标识那些单独不重复的样式,而class是可以重复使用的。

4、实用的<li>

<li>也叫链接列表,在与<ol>或<ul>正确搭配的时候非常好用,尤其是用在导航菜单样式上。

5、少用<table>多用<div>

CSS最大的优势之一是使用<div>达到样式上的灵活多变。不同于<table>,<div>里的内容不会被锁在单元格<td>中。可以说几乎所有的表格布局都可以在<div>和样式的正确使用下完成。当然,有大量表格内容时,还是用
<table>吧。

6、CSS调试工具

在设计CSS时,能够得到页面布局的预览对于优化CSS样式和纠错是很有帮助的。这里有一些免费的CSS调试工具推荐给你,你可以把它装在浏览器上:FireFox
Web Developer、DOM
Inspector、Internet
Explorer Developer
Toolbar、Firebug

图片 1

7、避免多余的选择器

有时你的CSS声明可以更简单,特别是你发现你的代码和下面的类似:

CSS

ul li { … }

1
ul li { … }

CSS

ol li { … }

1
ol li { … }

CSS

table tr td { … }

1
table tr td { … }

它们可以简化为:

CSS

li { … }

1
li { … }

CSS

td { … }

1
td { … }

如上是因为<li>会且只会与<ul>或<ol>连用,就像<td>只能存在于<tr>和<table>中一样,这儿真没有把它们重复一次的必要。

8、!Important

所有被!important
标记的样式,即使它后来被重写,浏览器也只会采用被标记的那条。

CSS

.page { background-color:blue !important; background-color:red; }

1
2
3
4
.page {
  background-color:blue !important;
  background-color:red;
}

比如上面的例子,因为background-color:blue 被标记为!important
,即使后来有把背景改成红色的语句,也只采用被标记的那条。!important
用来强制使一个样式避免在之后的编码中被修改,遗憾的是IE不支持。

9、图像替代文本

这招经常被用来把一个基于文本的<h1>title</h1>标题换成图片。按照如下所示:

CSS

h1 { text-indent:-9999px; background:url(“title.jpg”) no-repeat;
width:100px; height:50px; }

1
2
3
4
5
6
h1 {
  text-indent:-9999px;
  background:url("title.jpg") no-repeat;
  width:100px;
  height:50px;
}

解释说明: text-indent:-9999px;
利用缩进把文本撤掉,然后用指定了背景和长宽的图片代替。

10、理解CSS的定位position

下列文章阐述了CSS定位position: {…}的理解和用法。

11、@import vs <link>

有两种方法可以外部引用CSS文件:@import和<link>

. 如果你不确定用哪种,Difference Between @import and
link
一文可以帮你选择。

12、CSS表单设计

在CSS中,设计和制定网页表格变得非常容易。以下几篇文章可以教你怎么做:Table-less
form
Form
Garden
Styling even
more form
controls
、formee。

图片 2

13、设计灵感来源

如果你是想寻找一些杰出的基于CSS的网站来激发灵感,或者只是找一些好的UI,这里推荐几个网站:

  1. CSS Remix

  2. CSS Reboot

  3. CSS Beauty

  4. CSS Elite

  5. CSS Mania

  6. CSS Leak

图片 3

不够?来个合集74 CSS
Galleries

14、CSS圆角

这篇文章教你怎么用CSS制作跨浏览器的圆角边框。

图片 4

15、操持代码整洁

要是你的CSS代码散乱,编完了你会发现它们乱七八糟。回顾的时候,肯定也是困难重重。对于初学者来说,最好排版规范,注释恰当。

扩展阅读

  1. 12 Principles For Keeping Your Code
    Clean

  2. Format CSS Codes Online

16、排版度量: Px Vs Em

排版的时候,如何选择度量单位px或em?如果你感到有疑惑?下面几篇文章或许能够让你更好的理解度量单位。Units
of Measurement in
CSS
CSS Font size
explained
Using
Points, Pixels, Ems, or Percentages for CSS
Fonts

扩展阅读

  1. CSS中强大的EM

  2. CSS FONT-SIZE: EM VS. PX VS. PT VS.
    PERCENT

  3. Which font sizing is best? EM vs PX vs
    %

  4. px – em – % – pt – keyword

  5. Understanding em Units in
    CSS

17、CSS浏览器兼容表

我们都知道不同的浏览器对于CSS渲染方式也不相同。有个参考,图表或者清单来说明各种浏览器对CSS的兼容状况是很有用的:

CSS
支持表格: #1#2#3#4.

图片 5

18、CSS中多列布局

是不是在设计中遇到左,中,右的多列问题?接下来几篇文章或许对你有帮助:

  1. In Search of the Holy
    Grail

  2. Faux Columns

  3. Top reasons your CSS columns are messed
    up

  4. Litte Boxes
    (examples)

  5. Multi-Column Layouts Climb Out of the
    Box

  6. Absolute Columns

图片 6

19、使用免费编辑器

专用的编辑器总比记事本强吧。这儿有几个不错的推荐:Simple
CSS
Notepad
++
A Style CSS
Editor

图片 7

20、理解媒体类型

当你用<link>的时候可能会遇到媒体类型。print,
projection和screen是有时会用到的类型。理解和适当的使用它们可以让用户易于访问。

扩展阅读

  1. CSS3 Media
    Queries

  2. CSS and Media
    Types

  3. W3 Media Types

  4. CSS Media
    Types

  5. CSS2 Media Types

  6. CSS3 Media
    Queries模板

  7. 使用em单位创建CSS3的Media
    Queries

  8. iPads和iPones的Media
    Queries

 

译者手语:初次翻译前端技术博文,整个翻译依照原文线路进行,并在翻译过程略加了个人对技术的理解。如果翻译有不对之处,还烦请同行朋友指点。谢谢!

 

赞 3 收藏 3
评论

图片 8

我的体会

目标

HTML,CSS和JavaScript之间总会存在耦合关联。不管怎样,这些技术与生俱来就是要和其它进行交互。举个例子,一种飞闪转换效果可能会在样式表中用带有类选择器定义,但它经常由HTML初始化,并通过用户交互,如编写JavaScript,来触发。由于前端代码的有些耦合是不可避免的,你的目标就不应该是简单地消除之间的耦合,而应该是减少代码间不必要的依赖耦合关系。一个后端开发者应该能够对HTML模板中的标记进行更改,而无需担心意外破坏CSS规则或者一些JavaScript功能。由于当今的web团队日渐增大且专业化,这个目标比以往更甚。

作者视角

我自己在 CMUI
第一版中,基本上使用的是文章开头所说的“链式类名”风格。比如说,一个大号按钮的结构可能是这样的:

XHTML

<button type=”button” class=”cmBtn cmLarge”>Large
button</button>

1
<button type="button" class="cmBtn cmLarge">Large button</button>

而在 Bootstrap 中,类似的元素是这样的:

XHTML

<button type=”button” class=”btn btn-lg”>Large
button</button>

1
<button type="button" class="btn btn-lg">Large button</button>

最开始我并没有觉得这两者有什么不同——前一个类名用于挂载框架预定义的按钮样式,后一个类名用于指定按钮的尺寸。把
Bootstrap 源码中所有的 .btn-lg 替换成 .cmBtn.cmLarge,不就跟我的
CMUI 一样了嘛?我甚至觉得 Bootstrap 的类命名有点啰嗦,.btn
.btn-lg 中的 btn- 不是重复了吗?还是 CMUI 干净利落啊!

然而,看完这篇文章,我似乎体会到 Bootstrap
这种设计的好处。我的理解可能并不是原作者的出发点,但也不妨列举出来,仅供参考。

反模式

前端代码的紧耦合现象并不总是很明显。事实上复杂的是,一方面看起来似乎松耦合,但从另一方面则是紧耦合。以下是我曾经多次做过或者看过,以及吸取我的过错中,总结的所有的反模式。对每一个模式,我会尝试去解释为何耦合这么糟糕,并且指出如何去避免它。

过度复杂的选择器

CSS Zen
Garden向世界展示了你可以完全改变整个网站的外观而无需更改任意一个的HTML标记。这是语义网运动的典型代表,主要原则之一就是去避免使用表象类。乍一看,CSS
Zen
Garden可能看起来像是一个很好的解耦合例子,毕竟,把样式从标记语言中分离出来是它的重点所在。但是,若按照这样做,问题就来了,你会经常需要在你的样式表里有这样的选择器,如下:

JavaScript

#sidebar section:first-child h3 + p { }

1
#sidebar section:first-child h3 + p { }

CSS Zen
Garden中,虽然HTML几乎与CSS完全分离,但CSS会强耦合到HTML中去,此时就需要你对标记语言的结构有深层次的理解。这可能看起来似乎并不是很糟糕,尤其是某人维护着CSS,同时需要维护HTML,但一旦你增加了许多人手进去,这种情况就变得无法控制了。如果某个开发者在某种情况下在第一个<section>前增加了<div>,上面的规则就无法生效,然而他也不清楚其中缘由。

只要你网站的标记很少改动,CSS Zen
Garden就是一个非常不错的主意。但是这和当今的Web应用不尽然都是这种情况。与冗长而又复杂的CSS选择器相比,最好的办法是在可视化组件本身的根元素增加一个或多个类选择器。比如,如果侧边栏有子菜单,只需要为每个子菜单元素增加submenu类选择器,而不要用这样的形式:

CSS

ul.sidebar > li > ul { /* submenu styles */ }

1
2
3
ul.sidebar > li > ul {
  /* submenu styles */
}

这种方式的结果是在HTML中需要更多的类选择器,但从长远来看,这又降低了耦合度,以及让代码更可重用和可维护,并且还能让你的标记自文档化。如果HTML里没有类选择器,那些对CSS不熟悉的开发者就不清楚HTML的改动如何影响了其它代码。另一方面,在HTML中使用类选择器能很清晰地看到那些样式或者功能被使用到了。

用户视角

这两种类名风格的差异并不在于源码是怎么写的,而是在于开发者(这里指使用
Bootstrap
的开发者)在看到类名时的反应。我的理解是,不同的命名,对开发者的暗示是不同的

开发者们并不总是会按照组件文档的示例来编写组件的结构代码。比如说,某些时候他们手边没有文档(或不想找文档),又或者他们所期望的样式在文档中并没有列出。他们可能会抱着一种试试看的心态,尝试修改或组合手头的几个类名,以期产生某种新的样式效果。

如果类名是宽泛的(比如 CMUI 中的
.cmLarge),就很容易被拿来尝试——比如开发者会给一个 ul.cmList
元素增加 .cmLarge 类并期望得到一个大号的列表,但实际上 CMUI
并没有提供这种组合!这破坏了开发者的预期,导致心理受挫,以致最终放弃这个组件库(夸张了点哈)。

但如果类名是被一个“组件级”前缀限定的(比如 Bootstrap 中的
.btn-lg),那么它被开发者拿去组合到其它组件身上的可能性就相当低。即使某个异想天开的开发者试图把
.btn-lg 改成 .dropdown-lg
并应用到一个下拉菜单上,当他失败时,他应该也已经做好心理准备了罢。

多个类选择器的职责

一个类选择器往往是用来同时作为样式和JavaScript的钩子。虽然这看起来似乎很节约(因为至少减少了一个类标记),但事实上,这是把元素的表现和功能耦合起来了。

XHTML

<button class=”add-item”>Add to Cart</button>

1
<button class="add-item">Add to Cart</button>

以上例子描述了一个带有add-item类样式的”添加到购物车”按钮。

如果开发者想为此元素添加一个单击事件监听器,用已经存在的类选择器作为钩子非常的容易。我的意思是,既然已经存在了一个,为何要添加另一个呢?
但是想想看,有很多像这样的按钮,遍布了整个网站,都调用了相同的JavaScript功能。再想想看,如果市场团队想要其中一个和其它看起来完全不同但功能相同的按钮呢。也许这样就需要更多显著的色彩了。

问题就来了,因为监听单击事件的JavaScript代码希望add-item类选择器被使用到,但是你新的按钮又无法使用这个样式(或者它必须清除所有声明的,然后再重置新的样式)。还有,如果你测试的代码同时也希望使用add-item类选择器,那么你不得不要去更新那么代码用到的地方。更糟糕的是,如果这个”添加到购物车”功能不仅仅是当前应用用到的话,也就是说,把这份代码抽象出来作为一个独立的模块,那么即使一个简单的样式修改,可能会在完全不同的应用中引发问题。

使用javaScript钩子最好的(事实上也是比较鼓励的)做法是,如果你需要这么做,使用一种方式来避免样式和行为类选择器之间的耦合。

我的个人建议是让JavaScript钩子使用前缀,比如:js-*。这样的话,当开发者在HTML源代码中看到这样的类选择器,他就完全明白个中原因了。所以,上述的”添加到购物车”的例子可以重写成这样:

XHTML

<button class=”js-add-to-cart add-item”>Add to Cart</button>

1
<button class="js-add-to-cart add-item">Add to Cart</button>

现在,如果需要一个看起来不同的按钮,你可以很简单地修改下样式类选择器,而不管行为的类选择器。

XHTML

<button class=”js-add-to-cart add-item-special”>Add to
Cart</button>

1
<button class="js-add-to-cart add-item-special">Add to Cart</button>
标签:,

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章

网站地图xml地图