Same section with another styles
Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
…Main text title
这是图像描述
Tigran Vardanyan
Verified Expert in Engineering
Tigran是一位经验丰富的前端开发人员，对干净、高性能的CSS代码充满热情. 他喜欢保持简单和快速.
Previously At
Tigran是一位经验丰富的前端开发人员，对干净、高性能的CSS代码充满热情. 他喜欢保持简单和快速.
在我15年的web开发经验中, 我在不同的公司工作过, 从企业级到初创企业, 我和很多人一起工作过, 许多软件工程师同行一路走来. 我在项目中遇到的最常见和最重要的问题之一是 没能写出清晰易懂的代码.
Even the best developers 一流公司的员工则不会 always 遵循最佳实践并编写可清理和优化的代码.
引用一句古老但仍有意义的话 讨论干净代码原则的博客文章:
源代码类似于金融债务. 假设你想买一栋房子住. 大多数人没有足够的资金来支付现金买房, 所以你选择了抵押贷款. 但抵押贷款本身并不是一件好事. It’s a liability. 你每个月都得付债务利息。
web开发也是如此. 代码有持续的成本. 你必须理解它，你必须维护它，你必须随着时间的推移使它适应新的目标. 您拥有的代码越多，这些持续的成本就越大. 尽可能少地使用源代码，同时仍然能够实现我们的业务目标，这符合我们的最大利益.
但我们不要纠缠于抽象. 本文将介绍基本的干净代码原则, 用于组织代码的不同技术, 以及如何使它更易于维护, scalable, and easier to debug.
高质量的代码从基本的代码样式开始, 扩展到在HTML/CSS中使用许多可重用块编写大型应用程序时的最佳实践, 我们还将讨论命名约定，以创建更大的隐式可读性，以及第三方框架及其最佳实践.
当你读完这篇文章的时候, 您应该很好地理解高质量代码的基础知识，以及如何使HTML和CSS代码更容易维护和扩展.
让我们从优秀HTML和CSS代码的基础开始:W3C有效性, naming conventions, file structure, and so on.
如果你打算开发一款大型应用，那么你就需要注意文件结构. 它可以，或者应该是这样的:
Try to always use HTML and CSS validators.
Bad code:
Hello world
Expand details
All content goes here
p {
font: 400 inherit/1.125 serif;
}
Good code:
Hello world
Expand details
All content goes here
p {
font-weight: 400;
font-size: inherit;
line-height: 1.125;
font-family: serif;
}
![]()
这个属性对SEO、搜索引擎、网络爬虫、屏幕阅读器等起着至关重要的作用.
Bad code:
Good code:
对于名字，尽量使用 kebab-case (spinal-case) and not use camelCase, or under_score. Use under_score only when using BEM不过，如果您正在使用Bootstrap，最好保持一致并使用 - as a delimiter.
Bad code:
H1 title
Good code:
H1 title
kebab-case 更容易读懂 camelCase and under_score.
类的名称应该是这样的 .noun-adjective.
尽量使用类的通用名称，而不是编写特定于内容的名称. 它使代码更具可读性
Bad code:
Good code:
They are not 是HTML5所要求的，但是 W3C standards in HTML4/XHTML.
Bad code:
Good code:
Keep the CSS selector more specific and select the elements you need; try not to mention their parents if not necessary. 它将允许代码更快地呈现，并在将来消除任何管理障碍
Bad code:
Section aside h1 span {
margin-left: 25%;
}
Good code:
.left-offset {
margin-left: 25%;
}
而对目标元素应用类可能会在HTML中创建更多的代码, 它将允许代码更快地渲染，并将消除任何管理障碍.
如果您需要使用相同的块，但具有不同的样式, 尽量保持HTML不受影响. 只需在父元素中添加一个类，然后在CSS中将所有新样式应用于该类的子元素.
Bad code:
Same section with another styles
Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
…
Same section with another styles
Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
…
article {
padding: 10px 15px;
h1 {
font-size: 32px;
color: #ff0000;
}
}
.another-article {
padding-bottom: 30 px;
Border-bottom: 4px solid #ccc;
}
h1.other-styling-title {
font-size: 20px;
}
Good code:
Same section with another styles
Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
…
Same section with another styles
Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
…
article {
padding: 10px 15px;
h1 {
font-size: 32px;
color: #ff0000;
}
&.other-styling {
padding-bottom: 30 px;
Border-bottom: 4px solid #ccc;
/*你将有更少的课程*/
h1 {
font-size: 20px;
}
}
}
增加机组是不必要的，也没有提供额外的价值. 0px, 0em, 0%或任何其他零值之间没有区别. 单位并不重要，因为值仍然是零.
Bad code:
div {
margin: 20px 0px;
letter-spacing: 0%;
padding: 0px 5px;
}
Good code:
div {
margin: 20px 0;
letter-spacing: 0;
padding: 0 5px;
}
border-bottom 在CSS中添加一个 hr tag.Use the hr 标签，而不是编写一个新的选择器并在CSS中添加边框样式. 它使代码更加基于标记，这就是我们要做的.
Bad code:
I want this section to have a border.
Lorem ipsum
.border-bottom {
Border-bottom: 1px solid #000;
}
Good code:
I want this section to have a border.
Lorem ipsum
//如果需要，在bootstrap中更改hr变量
这是非常有用的 A > B selector, 该规则只适用于直系子女(ren), 在这种情况下，你不需要重置所有其他不需要样式的子元素的样式. 例如，它在编写嵌套菜单时非常有用. 您不需要重新定义子菜单样式.
Bad code:
- List 1
- List 2
- List 3
- Submenu 1
- Submenu 2
ul li {
list-style-type:没有;
}
li ul li {
/*重新定义为默认值*/
list-style-type:盘;
}
Good code:
- List 1
- List 2
- List 3
- Submenu 1
- Submenu 2
ul > li {
list-style-type:没有;
}
转到HTML，优先考虑的是确保一个健壮且易于维护的前端.
让你的前端代码基于标记，而不是写太多的CSS.
这将有助于搜索引擎，并使您的代码更具可读性, 潜在地提高搜索排名和用户体验.
Bad code:
Main text title
这是图像描述
Good code:
Main text title
这是图像描述
尽量不要在HTML中使用不必要的包装元素. Having tons tons of Bad code: Good code: Unnecessary br tags 不要使用任何自定义颜色或字体大小(如果颜色或字体大小不在框架中, 只需添加原子类). 原子类是简单的、单一用途的样式单元. 与内联样式非常相似，原子样式只应用单个样式声明. Bad code: Paragraph without atomic class Paragraph inside div without class Good code: Paragraph without atomic class Paragraph inside div without class 尽量保留粒度和原子类，并在需要时使用它们. 因此，您的前端将变得更加基于标记. 使用语义提供了更好的结构，并使代码和内容更易于阅读. Bad code: Good code: This is unnecessary br tag. 新的标签为您提供了更多的表达自由，并使常见元素标准化, 这提高了文档的自动化处理. 下面是所有元素的列表. 我发现很多开发人员总是使用很多 Bad code: Good code:
Semantics are important.
Bottom line: 学习和使用HTML5中的新元素. 这是非常值得的! 当谈到CSS时，很难不从一些非原创但时髦的建议开始: Sass 是世界上最成熟、稳定、强大的专业级CSS扩展语言. Sass有两种可用的语法. The first, 称为SCSS (Sassy CSS)，并在本文中使用, 是CSS语法的扩展. 第二种也是更老的语法, 称为缩进语法(有时简称为“Sass”), 提供了一种更简洁的CSS编写方式. 通过分组选择器，或使用 Bad code: Good code: 使用rem来设置大小和间距，例如，它根据属性生成的字体大小 你将为响应式视图编写更少的代码: Bad code: Good code: 尽量避免在CSS中使用固定的高度或宽度. 高度可以通过内部内容+填充来生成，宽度可以通过网格系统来定义(必要时使用嵌套网格). Bad code: Good code: 当你使用CSS预处理器时, 并计划为任何部分编写样式, 确保在CSS中只使用父项一次, 并在括号内包含所有子元素和媒体查询. 这将允许你 find and modify 当将来进行更改时，主父元素很容易放在一个地方. Bad code: Good code: 在编写任何CSS规则之前，总是要考虑哪些元素会受到影响. 如果你的改变不常见, 然后以一种只影响特定元素而不影响其他元素的方式编写规则. Bad code: Good code: 总是在自定义CSS和框架中寻找适合所需样式的现有规则. 只有在没有合适的内容时，才能继续编写新的内容. 这在处理大型应用程序时尤为重要. Bad code: Good code: 如果背景有一个属性, 我们指定属性, 但如果它有不同的背景属性, 我们可以给它一个声明. Bad code: Good code: 你是否尽力使用更多的简写属性和值. 使用简写属性, 你可以写得简明扼要, more often than not, 更具可读性的样式表, 节省宝贵的时间和精力. Bad code: Good code: Using Bad code: Good code: 虽然这条规则可以适用于一般的UI框架，但我使用的是 Bootstrap 作为一个例子，因为它是世界上最流行的前端组件库. Bootstrap允许您使用许多现成的类，使您的工作更容易. 尝试尽可能多地使用Bootstrap类，以创建更多基于html的标记. Bad code: Good code: Bootstrap依赖于 variables.scss file, 它允许您轻松地配置和定制前端，而无需编写一行代码. Otherwise, 如果您要自己手动编写所有自定义, 最好不要使用框架. 有些开发人员避免更改变量.scss, 认为他们仍然能够升级到一个新版本的引导没有太多的麻烦, 但这可能是一项乏味的任务. 即使是较小的更新也需要开发人员阅读变更日志, 浏览所有的标记和CSS, 并手动迁移到新版本. Bad code: Good code: Try to not overwrite Bad code: Good code: 开始使用Bootstrap 4，即使它还在测试阶段. 它包括许多新的类，这将有助于您更快地创建布局, 尤其是Flexbox和spacers. Bad code: Good code: 现在我们可以给元素分配类来移除所有边框或部分边框. Bad code: Good code: Don’t write Bad code: Good code: Don’t use Bad code: Lorem ipsum dolor sit amet, consectetur adipisicing. Good code: Lorem ipsum dolor sit amet, consectetur adipisicing. 如果您正在使用Bootstrap，那么 为了保持一致性, 最好总是遵循你开始时的规则和指导方针(无论是关于命名), code style, or file structure) 我希望你能够学到一些有用的东西，并且你会更多地考虑用最佳实践编写最小的HTML和CSS代码. 对于大公司来说，当代码混乱时，维护大型应用程序是相当困难的. 当然，大公司有钱买高质量的产品. 如果你遵循干净的编码原则，你将提高你找到好工作的机会. 自由职业者方面也值得提一下:专业人士同时处理多个项目和客户 必须交付干净的代码 这可以很快传递给其他开发者. 我希望在以后的帖子中扩展到更高级的主题, 因为我打算谈论自动化编码过程, 使用Gulp/Grunt任务, Linters, Editor plugins, 生成代码的工具, 代替你写代码的人工智能工具, 以及其他相关话题. 我希望这是一个有趣和有益的阅读. 祝你在编程过程中好运. and 元素是过去的事了. 保持事物的粒度和线性可以让你 实现最少的代码 (see next point).
Unnecessary br tags
使用原子类进行样式化.
Without using atomic class
Another h1 text
h1 {
color: red;
}
section > h1 {
color: blue;
}
Without using atomic class
Another h1 text
.text-red {
color: red;
}
.text-blue {
color: blue;
}
利用语义元素.
Welcome
This is unnecessary br tag.
Welcome
Use HTML5 tags.
and , but first please check here 哪些标签符合您的上下文逻辑:
HTML 4 title
Semantics
are
important.
HTML5 title
CSS:干净的代码和预处理器
使用CSS预处理器.
对选择器进行分组:在SASS中使用@extend.
@extend 在SASS中，您应该帮助您的代码保持DRY(不要重复自己)。.p {
font-size: 22px;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
}
h1 {
font-size: 41px;
color: #000;
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
}
.font-smoothing {
-webkit-font-smoothing:平滑;
-moz-osx-font-smoothing:灰度;
}
p {
font-size: 22px;
@extend .font-smoothing;
}
h1 {
font-size: 22px;
@extend .font-smoothing;
}
在CSS中使用rem单位而不是像素.
font-size of the root element. 它们还允许您通过更改根字体大小(例如在特定的媒体查询/屏幕大小)来快速缩放整个项目。.p {
font-size: 22px;
padding: 10px;
}
@media (max-width: 767px) {
p {
font-size: 16px;
padding: 5px;
}
}
html {
font-size: 14px;
}
@media (max-width: 767px) {
html {
font-size: 12px;
}
}
p {
font-size: 1.6rem;
padding: 1rem;
}
尽量避免在CSS中使用固定的高度或宽度.
#footer {
height: 130px;
}
#footer {
padding-top: 23px;
padding-bottom: 47 px;
}
确保在SCSS中只使用父项一次.
.section-parent-class {
position: relative;
h2 {
color: #ff0;
}
header {
margin: 2rem 1rem;
}
}
@media (max-width: 767px) {
.section-parent-class {
footer {
padding: .5rem;
}
}
}
.section-parent-class {
position: relative;
h2 {
color: #ff0;
}
header {
margin: 2rem 1rem;
}
footer {
@media (max-width: 767px) {
padding: .5rem;
}
}
}
在编写CSS规则之前，要考虑哪些元素会受到影响.
/*常用类*/
.title {
color: #008000;
}
/*指定不影响其他标题*/
.section-blog .title {
color: #008000;
}
在编写新的CSS规则和变量之前，尝试查找现有的CSS规则和变量.
.jumbotron {
margin-bottom: 20 px;
}
//修改$jumbotron-padding from _variables.scss
.jumbotron {
margin-bottom: jumbotron-padding美元;
}
Use specific rules.
.selector {
background: #fff;
}
.selector {
/*这样，背景图像将不会被覆盖，如果有*/
background - color: # fff;
}
使用简短的属性和值.
img {
margin-top: 5px;
margin-right: 10px;
margin-bottom: 25 px;
margin-left: 10px;
}
button {
填充:0 0 0 20px;
}
img {
/*简写样式*/
边距:5px 10px 25px;
}
button {
/*不要玩太多的速记*/
padding-left: 20px;
}
Use
em instead of px for line height.em and px 单位为我们的设计提供了灵活性，使我们能够上下缩放元素，而不是被固定的大小所困. 我们可以利用这种灵活性，使我们的设计在开发过程中更容易调整，响应更快，并允许浏览器用户控制网站的整体规模，以获得最大的可读性.p {
font-size: 12px;
line-height: 24px;
}
p {
font-size: 12px;
line-height: 2em; /* or just line-height: 2; */
}
尽量使用Bootstrap类.
Lorem ipsum dolor sit amet, ut ius delenit facilisis
Lorem ipsum dolor sit amet, ut ius delenit facilisis
.first-column,
.second-column {
width: 25%;
float: left;
padding-left: 15px;
padding-right: 15 px;
}
...
Lorem ipsum dolor sit amet, ut ius delenit facilisis
Lorem ipsum dolor sit amet, ut ius delenit facilisis
适当地定制框架.
navbar {
padding: 20px 10px;
}
.carousel-indicators {
li {
width: 6px;
height: 6px;
margin-right: 3px;
margin-left: 3px;
}
}
$navbar-padding-y:($spacer / 2) !default;
navbar-padding-x:垫片美元 !default;
美元carousel-indicator-width: 30 px !default;
美元carousel-indicator-height: 3 px !default;
美元carousel-indicator-spacer: 3 px !default;
Don’t overwrite
.container width..container’s width. 尝试使用网格系统代替，或者只是改变容器的宽度 _variables.scss. 如果你需要减少它的宽度，只需使用max-width而不是width. In that case, .container from Bootstrap将在响应式视图中保持不变..container {
@media (min-width: $screen-lg-min) {
width: 1300px;
}
}
//从_variables中修改$container-lg.scss
.container {
@media (min-width: $screen-lg-min) {
宽度:container-lg美元;
}
}
使用Bootstrap 4类，少写CSS.
Flex item 1
Flex item 2
Flex item 3
Flex item 1
Flex item 2
Flex item 3
.flex-ex {
display: flex;
> div {
padding: 2px;
}
&.flex-reverse {
flex-direction: row-reverse;
}
li {
list-style: none;
padding: .5rem;
}
}
border-example2 {
> span {
width: 100px;
height: 100px;
显示:inline-block;
margin: .50rem;
background - color: # e1e1e1;
border: 1px solid;
&.border0 {
border: none;
}
&.border-top0 {
border-top: none;
}
&.border-right0 {
border-right: none;
}
&.border-bottom0 {
border-bottom: none;
}
&.border-left0 {
border-left: none;
}
}
}
.border-example {
> span {
width: 100px;
height: 100px;
background - color: # e1e1e1;
border: 1px solid;
}
}
Use
.col-sm-X if .col-md-X and .col-lg-X 对X有相同的值吗..col-md-X and .col-lg-X if .col-sm-X has same value for X. 例如，没有必要写 .col-lg-10 因为当我们写 .col-md-10，我们自动包含 .col-lg-10 in it.
Don’t use
.col-xs-12..col-xs-12 because if no .col-xs-X 是指定的，那么会是 .col-xs-12 by default.
Services
Lorem ipsum dolor sit amet consectetur.
E-Commerce
Services
Lorem ipsum dolor sit amet consectetur.
E-Commerce
Don’t use
reset.css; use normalize.css instead.normalize.css 已经包含在这里了，不需要再包含两次吗.遵循指导方针，即使它们不是最佳实践.
Wrapping Up
干净的代码是易于阅读和理解的代码，并且易于任何开发人员维护和修改. 这意味着分配的名称是有意义的，但不会太长. 代码的任何部分都不应该重复，而且几乎所有内容都应该保持一致.
“不要重复”(DRY), “abstraction,和“保持简单。, “愚蠢”(KISS)原则是编写干净代码时最有用的最佳实践. 应该确保一致性和可读性，并且必须遵循样式指南和惯例.
Located in Yerevan, Armenia
Member since February 19, 2016
Tigran是一位经验丰富的前端开发人员，对干净、高性能的CSS代码充满热情. 他喜欢保持简单和快速.
作者都是各自领域经过审查的专家，并撰写他们有经验的主题. 我们所有的内容都经过同行评审，并由同一领域的Toptal专家验证.世界级的文章，每周发一次.
世界级的文章，每周发一次.
Join the Toptal® community.
Good code:
\n\n
\n\nKeep the CSS selector more specific and select the elements you need; try not to mention their parents if not necessary. 它将允许代码更快地呈现，并在将来消除任何管理障碍
\n\nBad code:
\n\nSection aside h1 span {\n margin-left: 25%;\n}\nGood code:
\n\n.left-offset {\n margin-left: 25%;\n}\n而对目标元素应用类可能会在HTML中创建更多的代码, 它将允许代码更快地渲染，并将消除任何管理障碍.
\n\n如果您需要使用相同的块，但具有不同的样式, 尽量保持HTML不受影响. 只需在父元素中添加一个类，然后在CSS中将所有新样式应用于该类的子元素.
\n\nBad code:
\n\n\n Same section with another styles
\n Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
\n …\n \n\n\n\n Same section with another styles
\n Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
\n …\n \narticle {\n padding: 10px 15px;\n h1 {\n font-size: 32px;\n color: #ff0000;\n }\n}\n\n.another-article {\n padding-bottom: 30 px;\n Border-bottom: 4px solid #ccc;\n}\nh1.other-styling-title {\n font-size: 20px;\n}\nGood code:
\n\n\n Same section with another styles
\n Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
\n … \n \n\n\n\n Same section with another styles
\n Lorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
\n … \n \narticle {\n padding: 10px 15px;\n h1 {\n font-size: 32px;\n color: #ff0000;\n }\n\n &.other-styling {\n padding-bottom: 30 px;\n Border-bottom: 4px solid #ccc;\n /*你将有更少的课程*/\n h1 {\n font-size: 20px;\n }\n }\n}\n增加机组是不必要的，也没有提供额外的价值. 0px, 0em, 0%或任何其他零值之间没有区别. 单位并不重要，因为值仍然是零.
\n\nBad code:
\n\n div {\n margin: 20px 0px;\n letter-spacing: 0%;\n padding: 0px 5px;\n}\nGood code:
\n\ndiv {\n margin: 20px 0;\n letter-spacing: 0;\n padding: 0 5px;\n}\nborder-bottom 在CSS中添加一个 hr tag.Use the hr 标签，而不是编写一个新的选择器并在CSS中添加边框样式. 它使代码更加基于标记，这就是我们要做的.
Bad code:
\n\nI want this section to have a border.
\nLorem ipsum
\n.border-bottom {\n Border-bottom: 1px solid #000;\n}\nGood code:
\n\nI want this section to have a border.
\n
\nLorem ipsum
\n//如果需要，在bootstrap中更改hr变量\n这是非常有用的 A > B selector, 该规则只适用于直系子女(ren), 在这种情况下，你不需要重置所有其他不需要样式的子元素的样式. 例如，它在编写嵌套菜单时非常有用. 您不需要重新定义子菜单样式.
Bad code:
\n\n\n - List 1
\n - List 2
\n - List 3\n
\n - Submenu 1
\n - Submenu 2
\n
\n \n
\nul li {\n list-style-type:没有;\n}\nli ul li {\n /*重新定义为默认值*/\n list-style-type:盘;\n}\nGood code:
\n\n\n - List 1
\n - List 2
\n - List 3\n
\n - Submenu 1
\n - Submenu 2
\n
\n \n
\nul > li {\n list-style-type:没有;\n}\n转到HTML，优先考虑的是确保一个健壮且易于维护的前端.
\n\n让你的前端代码基于标记，而不是写太多的CSS.
\n\n这将有助于搜索引擎，并使您的代码更具可读性, 潜在地提高搜索排名和用户体验.
\n\nBad code:
\n\n\n Main text title
\n ![\"example\"](\"http://via.placeholder.com/150x150\")
\n 这是图像描述
\n\nGood code:
\n\n\n Main text title
\n \n \n \n 这是图像描述\n \n \n \n尽量不要在HTML中使用不必要的包装元素. Having tons tons of Bad code: Good code: Unnecessary br tags 不要使用任何自定义颜色或字体大小(如果颜色或字体大小不在框架中, 只需添加原子类). 原子类是简单的、单一用途的样式单元. 与内联样式非常相似，原子样式只应用单个样式声明. Bad code: Paragraph without atomic class Paragraph inside div without class Good code: Paragraph without atomic class Paragraph inside div without class 尽量保留粒度和原子类，并在需要时使用它们. 因此，您的前端将变得更加基于标记. 使用语义提供了更好的结构，并使代码和内容更易于阅读. Bad code: Good code: This is unnecessary br tag. 新的标签为您提供了更多的表达自由，并使常见元素标准化, 这提高了文档的自动化处理. 下面是所有元素的列表. 我发现很多开发人员总是使用很多 Bad code: Good code: \n Semantics are important.\n Bottom line: 学习和使用HTML5中的新元素. 这是非常值得的! 当谈到CSS时，很难不从一些非原创但时髦的建议开始: Sass 是世界上最成熟、稳定、强大的专业级CSS扩展语言. Sass有两种可用的语法. The first, 称为SCSS (Sassy CSS)，并在本文中使用, 是CSS语法的扩展. 第二种也是更老的语法, 称为缩进语法(有时简称为“Sass”), 提供了一种更简洁的CSS编写方式. 通过分组选择器，或使用 Bad code: Good code: 使用rem来设置大小和间距，例如，它根据属性生成的字体大小 你将为响应式视图编写更少的代码: Bad code: Good code: 尽量避免在CSS中使用固定的高度或宽度. 高度可以通过内部内容+填充来生成，宽度可以通过网格系统来定义(必要时使用嵌套网格). Bad code: Good code: 当你使用CSS预处理器时, 并计划为任何部分编写样式, 确保在CSS中只使用父项一次, 并在括号内包含所有子元素和媒体查询. 这将允许你 find and modify 当将来进行更改时，主父元素很容易放在一个地方. Bad code: Good code: 在编写任何CSS规则之前，总是要考虑哪些元素会受到影响. 如果你的改变不常见, 然后以一种只影响特定元素而不影响其他元素的方式编写规则. Bad code: Good code: 总是在自定义CSS和框架中寻找适合所需样式的现有规则. 只有在没有合适的内容时，才能继续编写新的内容. 这在处理大型应用程序时尤为重要. Bad code: Good code: 如果背景有一个属性, 我们指定属性, 但如果它有不同的背景属性, 我们可以给它一个声明. Bad code: Good code: 你是否尽力使用更多的简写属性和值. 使用简写属性, 你可以写得简明扼要, more often than not, 更具可读性的样式表, 节省宝贵的时间和精力. Bad code: Good code: Using Bad code: Good code: 虽然这条规则可以适用于一般的UI框架，但我使用的是 Bootstrap 作为一个例子，因为它是世界上最流行的前端组件库. Bootstrap允许您使用许多现成的类，使您的工作更容易. 尝试尽可能多地使用Bootstrap类，以创建更多基于html的标记. Bad code: Good code: Bootstrap依赖于 variables.scss file, 它允许您轻松地配置和定制前端，而无需编写一行代码. Otherwise, 如果您要自己手动编写所有自定义, 最好不要使用框架. 有些开发人员避免更改变量.scss, 认为他们仍然能够升级到一个新版本的引导没有太多的麻烦, 但这可能是一项乏味的任务. 即使是较小的更新也需要开发人员阅读变更日志, 浏览所有的标记和CSS, 并手动迁移到新版本. Bad code: Good code: Try to not overwrite Bad code: Good code: 开始使用Bootstrap 4，即使它还在测试阶段. 它包括许多新的类，这将有助于您更快地创建布局, 尤其是Flexbox和spacers. Bad code: Good code: 现在我们可以给元素分配类来移除所有边框或部分边框. Bad code: Good code: Don’t write Bad code: Good code: Don’t use Bad code: Lorem ipsum dolor sit amet, consectetur adipisicing. Good code: Lorem ipsum dolor sit amet, consectetur adipisicing. 如果您正在使用Bootstrap，那么 为了保持一致性, 最好总是遵循你开始时的规则和指导方针(无论是关于命名), code style, or file structure) 我希望你能够学到一些有用的东西，并且你会更多地考虑用最佳实践编写最小的HTML和CSS代码. 对于大公司来说，当代码混乱时，维护大型应用程序是相当困难的. 当然，大公司有钱买高质量的产品. 如果你遵循干净的编码原则，你将提高你找到好工作的机会. 自由职业者方面也值得提一下:专业人士同时处理多个项目和客户 必须交付干净的代码 这可以很快传递给其他开发者. 我希望在以后的帖子中扩展到更高级的主题, 因为我打算谈论自动化编码过程, 使用Gulp/Grunt任务, Linters, Editor plugins, 生成代码的工具, 代替你写代码的人工智能工具, 以及其他相关话题. 我希望这是一个有趣和有益的阅读. 祝你在编程过程中好运. and 元素是过去的事了. 保持事物的粒度和线性可以让你 实现最少的代码 (see next point).\n\n
\n\n\n \n\n \n \n Unnecessary br tags\n \n
\n\n使用原子类进行样式化.
\n\n
\n\nWithout using atomic class
\n Another h1 text
\n
\n\nh1 {\n color: red;\n}\nsection > h1 {\n color: blue;\n}\n
\n\nWithout using atomic class
\n Another h1 text
\n
\n\n.text-red {\n color: red;\n}\n.text-blue {\n color: blue;\n}\n利用语义元素.
\n\n
\n\nWelcome\nThis is unnecessary br tag.\n
\n\nWelcome
\nUse HTML5 tags.
\n\n and , but first please check here 哪些标签符合您的上下文逻辑:\n\n
\n\n \n \nHTML 4 title\n \n Semantics\n are\n important.\n \n
\n\n HTML5 title
\n CSS:干净的代码和预处理器
\n\n使用CSS预处理器.
\n\n对选择器进行分组:在SASS中使用@extend.
\n\n@extend 在SASS中，您应该帮助您的代码保持DRY(不要重复自己)。.
\n\np {\n font-size: 22px;\n -webkit-font-smoothing:平滑;\n -moz-osx-font-smoothing:灰度;\n}\nh1 {\n font-size: 41px;\n color: #000;\n -webkit-font-smoothing:平滑;\n -moz-osx-font-smoothing:灰度;\n}\n
\n\n.font-smoothing {\n -webkit-font-smoothing:平滑;\n -moz-osx-font-smoothing:灰度;\n}\n\np {\n font-size: 22px;\n @extend .font-smoothing;\n}\nh1 {\n font-size: 22px;\n @extend .font-smoothing;\n}\n在CSS中使用rem单位而不是像素.
\n\nfont-size of the root element. 它们还允许您通过更改根字体大小(例如在特定的媒体查询/屏幕大小)来快速缩放整个项目。.
\n\np {\n font-size: 22px;\n padding: 10px;\n}\n\n@media (max-width: 767px) {\n p {\n font-size: 16px;\n padding: 5px;\n }\n}\n
\n\nhtml {\n font-size: 14px;\n}\n@media (max-width: 767px) {\n html {\n font-size: 12px;\n }\n}\n\np {\n font-size: 1.6rem;\n padding: 1rem;\n}\n尽量避免在CSS中使用固定的高度或宽度.
\n\n
\n\n\n
\n\n#footer {\n height: 130px;\n}\n
\n\n\n
\n\n#footer {\n padding-top: 23px;\n padding-bottom: 47 px;\n}\n确保在SCSS中只使用父项一次.
\n\n
\n\n.section-parent-class {\n position: relative;\n h2 {\n color: #ff0;\n }\n header {\n margin: 2rem 1rem;\n }\n}\n\n@media (max-width: 767px) {\n .section-parent-class {\n footer {\n padding: .5rem;\n }\n }\n}\n
\n\n.section-parent-class {\n position: relative;\n h2 {\n color: #ff0;\n }\n header {\n margin: 2rem 1rem;\n }\n \n footer {\n @media (max-width: 767px) {\n padding: .5rem;\n }\n }\n}\n在编写CSS规则之前，要考虑哪些元素会受到影响.
\n\n
\n\n/*常用类*/\n.title {\n color: #008000;\n}\n
\n\n/*指定不影响其他标题*/\n.section-blog .title {\n color: #008000;\n}\n在编写新的CSS规则和变量之前，尝试查找现有的CSS规则和变量.
\n\n
\n\n.jumbotron {\n margin-bottom: 20 px;\n}\n
\n\n//修改$jumbotron-padding from _variables.scss\n.jumbotron {\n margin-bottom: jumbotron-padding美元;\n}\nUse specific rules.
\n\n
\n\n.selector {\n background: #fff;\n}\n
\n\n.selector {\n /*这样，背景图像将不会被覆盖，如果有*/\n background - color: # fff;\n}\n使用简短的属性和值.
\n\n
\n\nimg {\n margin-top: 5px;\n margin-right: 10px;\n margin-bottom: 25 px;\n margin-left: 10px;\n}\nbutton {\n 填充:0 0 0 20px;\n}\n
\n\nimg {\n /*简写样式*/\n 边距:5px 10px 25px;\n}\nbutton {\n /*不要玩太多的速记*/\n padding-left: 20px;\n}\nUse
\n\nem instead of px for line height.em and px 单位为我们的设计提供了灵活性，使我们能够上下缩放元素，而不是被固定的大小所困. 我们可以利用这种灵活性，使我们的设计在开发过程中更容易调整，响应更快，并允许浏览器用户控制网站的整体规模，以获得最大的可读性.
\n\np {\n font-size: 12px;\n line-height: 24px;\n}\n
\n\np {\n font-size: 12px;\n line-height: 2em; /* or just line-height: 2; */\n}\n尽量使用Bootstrap类.
\n\n
\n\nLorem ipsum dolor sit amet, ut ius delenit facilisis\n Lorem ipsum dolor sit amet, ut ius delenit facilisis\n
\n\n.first-column,\n.second-column {\n width: 25%;\n float: left;\n padding-left: 15px;\n padding-right: 15 px;\n}\n...\n
\n\nLorem ipsum dolor sit amet, ut ius delenit facilisis\n Lorem ipsum dolor sit amet, ut ius delenit facilisis\n适当地定制框架.
\n\n
\n\nnavbar {\n padding: 20px 10px;\n}\n.carousel-indicators {\n li {\n width: 6px;\n height: 6px;\n margin-right: 3px;\n margin-left: 3px;\n }\n}\n
\n\n$navbar-padding-y:($spacer / 2) !default;\nnavbar-padding-x:垫片美元 !default;\n\n美元carousel-indicator-width: 30 px !default;\n美元carousel-indicator-height: 3 px !default;\n美元carousel-indicator-spacer: 3 px !default;\nDon’t overwrite
\n\n.container width..container’s width. 尝试使用网格系统代替，或者只是改变容器的宽度 _variables.scss. 如果你需要减少它的宽度，只需使用max-width而不是width. In that case, .container from Bootstrap将在响应式视图中保持不变.
\n\n.container {\n @media (min-width: $screen-lg-min) {\n width: 1300px;\n }\n}\n
\n\n//从_variables中修改$container-lg.scss\n.container {\n @media (min-width: $screen-lg-min) {\n 宽度:container-lg美元;\n }\n}\n使用Bootstrap 4类，少写CSS.
\n\n
\n\n\n \nFlex item 1\n Flex item 2\n Flex item 3\n\n \nFlex item 1\n Flex item 2\n Flex item 3\n
\n\n.flex-ex {\n display: flex;\n > div {\n padding: 2px;\n }\n &.flex-reverse {\n flex-direction: row-reverse;\n }\n li {\n list-style: none;\n padding: .5rem;\n }\n}\n
\n\n \n
\n\n
\n
\n\n\n \n \n \n \n \n\n
\n\nborder-example2 {\n > span {\n width: 100px;\n height: 100px;\n 显示:inline-block;\n margin: .50rem;\n background - color: # e1e1e1;\n border: 1px solid;\n &.border0 {\n border: none;\n }\n &.border-top0 {\n border-top: none;\n }\n &.border-right0 {\n border-right: none;\n }\n &.border-bottom0 {\n border-bottom: none;\n }\n &.border-left0 {\n border-left: none;\n }\n }\n}\n
\n\n\n \n \n \n \n \n\n
\n\n.border-example {\n > span {\n width: 100px;\n height: 100px;\n background - color: # e1e1e1;\n border: 1px solid;\n }\n}\nUse
\n\n.col-sm-X if .col-md-X and .col-lg-X 对X有相同的值吗..col-md-X and .col-lg-X if .col-sm-X has same value for X. 例如，没有必要写 .col-lg-10 因为当我们写 .col-md-10，我们自动包含 .col-lg-10 in it.
\n\n\n
\n![\"\"](\"assets/images/press/press-1.png\")
![\"\"](\"assets/images/press/press-2.png\")
\n\n\n
\nDon’t use
\n\n.col-xs-12..col-xs-12 because if no .col-xs-X 是指定的，那么会是 .col-xs-12 by default.
\n\n\n \n\n \n \n \n Services
\n Lorem ipsum dolor sit amet consectetur.
\n \n \n \n \n E-Commerce
\n
\n\n\n \nServices
\n Lorem ipsum dolor sit amet consectetur.
\n \n \n \n \n E-Commerce
\n Don’t use
\n\nreset.css; use normalize.css instead.normalize.css 已经包含在这里了，不需要再包含两次吗.遵循指导方针，即使它们不是最佳实践.
\n\nWrapping Up
\n\n