上个周末因为自己要写 PPT 而没来得急整理, 所以又错过了一期. 在这一期中, 大部分内容将围绕着 @Bill Mei 的《 Top 10 most deadly CSS mistakes made by new and experienced developers 》文章中提到观点来展开. 这里面的一些观点虽然不完全对, 但还是有相应的参考价值, 取舍由大家自己来决定. 如果你在这方面也有相关的经验, 也欢迎在下面的评论中分享. 另外在后面会简单的整理几个最近觉得有意思的新东西. 感兴趣的同学, 请继续往下阅读.
10 个最致命的 CSS 错误
多年来, 很多工程师在使用 CSS 时容易犯一些常见的错误, 不管是老司机还是新手. 而 CSS 一直又是简单但不容易的语言(不直观和难以使用), 真正探究的并不多, 而很多常见的错误又往往会阻碍项目的开发进程. 如果我们在编写 CSS 的时候就能避免这些错误, 是不是在实际开发的时候能事半功倍.
以下是编写 CSS 中常见的 10 个错误, 也是最致命的错误.
接下来的 10 条内容来自于 @Bill Mei 的《 Top 10 most deadly CSS mistakes made by new and experienced developers 》一文.
编写选择器时太过遵循 DOM 结构
有一些开发人员喜欢追求一种极简主义的风格, 他们试图着不在 html 中有大量的类名( class ), 通过使用 DOM 结构来作为 CSS 的选择器, 这样他们的选择器就会遵循 DOM 树的结构. 比如有这么一个 DOM 结构:
- <body>
- <div class="container">
- <div class="main-content">
- <div class="blog-row">
- <div class="blog-col">
- <section>
- <article>
- <a href="#">This link is not bold</a>
- <p><a href="#" class="bold">This link is bold</a></p>
- </article>
- </section>
- <section>
- <a href="#">This link is not bold</a>
- </section>
- </div>
- </div>
- </div>
- </div>
- </body>
有些同学在给 a 链接添加样式的时候, 会这样的操作:
- body .container .main-content .blog-row .blog-col section article p a {
- font-weight: bold;
- }
就算是在使用 CSS 处理器的时候也无限级的嵌套, 经如:
- body {
- .container{
- .main-content{
- .blog-row{
- .blog-col{
- section{
- article{
- p{
- a{
- font-weight: bold;
- }
- }
- }
- }
- }
- }
- }
- }
- }
特别是在 CSS 的处理器中, 不要说是新手, 很多老司机也会出现类似上面这样的错误.
虽然在编写 HTML 结构的时候, 很多司机也提倡 DOM 结构能简洁就尽量的简洁, 但并不是提倡这种无约束的极简主义. 因为这种极简主义虽然保持了 HTML 的干净, 但会让 CSS 变得混乱, 使其更难理解, 调试和更改. 就如上面的示例所示, CSS 会变得不灵活, 因为长组合的 CSS 选择器承担了复制 HTML 结构的任务, 但这有背于 CSS 应该做的事情.
CSS 的任务是提供样式; HTML 的任务是提供结构. 这也是 web 构建中最基本的原则之一. 如果仅仅追求 DOM 简洁干净, 而忽略 CSS, 不考虑与 CSS 相互结合, 这是错误的一种做法. 另外这种编写 CSS 的方式强度依赖于 HTML 的 DOM 结构树, 也会造成很多致命性的错误, 比如说, 你的 HTML 结构做出调整, 那么 CSS 选择器也将做调整, 而这种长链条的组合是最易于出错的. 这种做法也在无形中增加很多不必要的工作.
相反, 我更建议 CSS 的类和 HTML 的 DOM 更应该合理的结合起来. 如果你需要从页面中选择一个特定的元素, 应该在该元素上添加一个类名来完成:
- .bold {
- font-weight: bold;
- }
就算是你要使用这种长组合的方式来定位到 DOM 元素, 我也强烈建议:
CSS 的选择器不超过三级.
幸运的是, 现在有很多方式可以帮助我们避免这种方式, 比如借助 StyleLint 来监控你的 CSS 代码, 让选择器不超三级嵌套. 也可以使用 CSS-in-JS 和 CSS Modules 方式来维护你的 CSS 代码. 特别今天(截至 2019 年), 这种方式更被广泛的采用.
- The Definitive Guide to CSS Cascading and Specificity
- CSS Specificity http://dev.to/emmawedekind/css-specificity-1kca
- <article>
- <h1>My cool blog post</h1>
- <p>This blog is so cool!</p>
- </article>
- <footer>
- <h1>Contact Us</h1>
- <p>Tel: 867-5309</p>
- </footer>
- 8 Meta Tags That Improve SEO
- 5 Easy HTML Tags Anyone Can Code and Every Webpage Needs http://www.klipfolio.com/blog/easy-html-tags
- Meta Tags in 2019: Why are They Important in SEO?
- 7 Essential HTML Tags that Separate SEO Pros from the Rookies http://neilpatel.com/blog/html-tags-for-seo/
- The 10 Most Important HTML Tags You Need to Know for SEO
- HTML Tags for SEO: to use or not to use?
- SEO vs. React: Web Crawlers are Smarter Than You Think
- The Ultimate Guide to JavaScript SEO
- // 不好的用法
- p {
- font-size: 16px;
- line-height: 20px;
- margin-bottom: 8px;
- }
- // 好的用法
- body {
- font-size: 16px;
- }
- p {
- font-size: 1rem;
- line-height: 1.25;
- margin-bottom: 0.5em;
- }
- // 不好的示例
- .article {
- display: inline-block;
- width: 50%;
- margin-bottom: 1em;
- font-family: sans-serif;
- border-radius: 1rem;
- box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
- }
- .sidebar {
- width: 25%;
- margin-left: 5px;
- }
- <div class="article"></div>
- <div class="article sidebar"></div>
- // 好的示例
- /* Layout */
- .article, .sidebar {
- display: inline-block;
- }
- .article {
- width: 50%;
- margin-bottom: 1em;
- }
- .sidebar {
- width: 25%;
- margin-left: 5px;
- }
- /* Lipstick */
- .card {
- font-family: sans-serif;
- border-radius: 1rem;
- box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, .2);
- }
- <div class="article card"></div>
- <div class="sidebar card"></div>
- // 不好的做法
- .container {
- width: 980px;
- padding: 1em;
- }
- @media (max-width: 979px) {
- .container {
- width: 100%;
- padding: 0.5em;
- }
- }
- // 好的做法
- .container {
- width: 100%;
- max-width: 980px;
- padding: 0.5em;
- }
- @media (min-width: 980px) {
- .container {
- padding: 1em;
- }
- }
- <form oninput="added.value=parseInt(i1.value)+parseInt(i2.value)">
- <input type="number" min="0" name="i1" value="0"> +
- <input type="number" min="0" name="i2" value="0"> =
- <output name="added">0</output>
- </form>
- body:not(.home):not(.away):not(.page-50) {
- }
- // 使用 `slice`
- let input = "w3cplus.com"
- function removeLastCharacter(str){
- let charcter_arr = str.split('');
- return charcter_arr.slice(0, charcter_arr.length - 1).join('');
- }
- let output = removeLastCharacter(input);
- console.log(`Output is ${output}`); // => Output is w3cplus.co
- // 使用 substring 方法
- let input = "w3cplus.com"
- function removeLastCharacter(str){
- return str.substring(0, str.length - 1);
- }
- let output = removeLastCharacter(input);
- console.log(`Output is ${output}`); // => Output is w3cplus.co
- <!-- HTML -->
- <div class="container">
- <div>1</div>
- <div>2</div>
- <div>3</div>
- <div>4</div>
- <div>5</div>
- <div>6</div>
- </div>
- // CSS
- .container {
- display: grid;
- grid-template-columns: 100px 100px 100px;
- grid-template-rows: 50px 50px;
- }
- .container {
- display: grid;
- grid-template-columns: 1fr 1fr 1fr;
- grid-template-rows: 50px 50px;
- }
- .container {
- display: grid;
- grid-template-columns: repeat(3, 100px);
- grid-template-rows: repeat(2, 50px);
- }
- .container {
- display: grid;
- grid-gap: 5px;
- grid-template-columns: repeat(auto-fit, 100px);
- grid-template-rows: repeat(2, 100px);
- }
- .container {
- display: grid;
- grid-gap: 5px;
- grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
- grid-template-rows: repeat(2, 100px);
- }
- Intrinsically Responsive CSS Grid with minmax() and min()
- Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
来源: http://www.tuicool.com/articles/fQNrAf7