为什么 CSS Flexbox 有 Order 属性？这和关注点分离不冲突吗？

问题描述 投票：0回答：1

CSS 

display: flexbox;
具有其弹性项目 
order
的属性。但这和‘关注点分离’不冲突吗？类似于 HTML 的 dir 属性与 CSS 
direction:rtl
；如果 html 
dir
比 CSS 
direction:rtl
更合适，那么流程、结构和方向性也是如此。


由于方向性是文档结构的一个组成部分，因此应使用标记来设置文档或信息块的方向性，或者识别文本中仅使用 Unicode 双向算法不足以实现所需方向性的位置。 [...] 因此，只要可用，您就应该使用专用的 bidi 标记。不要简单地将 CSS 样式附加到一般元素来实现效果。




我并不是在抱怨。我刚刚有一个项目，只需更改 
order
 就非常容易，而不是编辑 HTML。但问题仍然存在。方便吗？
方向（LTR/RTL）：CSS 方向和 HTML 方向属性有什么区别？

    





html

css

flexbox

separation-of-concerns


1个回答




    
    
    

        

            

                

                    
1
投票

                    
                

            

        

        
order
属性旨在允许您将页面的相关内容（某人表面上首先出现在页面上的原因）首先放置在 DOM 中，同时仍然实现某些布局，例如“圣杯”布局（页眉、内容、页脚，内容两侧都有侧边栏），而无需采取非常尴尬的技巧。
来自 
W3C Flexbox 规范
：


许多网页的标记具有类似的形状，顶部是页眉，底部是页脚，然后是内容区域和中间的一两个附加列。一般来说，内容最好出现在页面源代码中，位于附加列之前。然而，这使得许多常见的设计（例如简单地在左侧添加附加列和在右侧添加内容区域）变得难以实现。多年来，人们已经通过多种方式解决了这个问题，当有两个附加列时，通常被称为“圣杯布局”。顺序使这变得微不足道。例如，采用以下页面代码和所需布局的草图：


<!DOCTYPE html>
<header>...</header>
<main>
  <article>...</article>
  <nav>...</nav>
  <aside>...</aside>
</main>
<footer>...</footer>




image of a 'holy grail' layout

这样可以更快地加载内容，这直接关系到用户体验。


巧合的是，它还可以轻松地为
移动或响应式布局
重新排序弹性元素。我写这个答案是为了说明通过 CSS 做到这一点是多么微不足道。

但这和关注点分离不冲突吗？



不，HTML 关心的是
内容
。 CSS 关注的是
presentation
。 同级元素在页面上的呈现顺序是一个呈现问题，与它们是否应该水平、垂直、居中或侧对齐等显示没有什么不同
    



    

    


  

  

    
最新问题


  





  

    © www.soinside.com 2019 - 2024. All rights reserved.