Same section with another styles
\nLorem ipsum dolor sit amet, lorem sit eget proin id ipsum.
\n …\nMain text title
\n这是图像描述
\n\n ![\"example\"](\"http://via.placeholder.com/150x150\")
\n \nToptal, LLC版权所有
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 \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: 尽量不要覆盖 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: 20px;\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: 25px;\n margin-left: 10px;\n}\nbutton {\n padding: 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: 15px;\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 边界底部:没有;\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 对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