升级CSS布局的新方法:Atomic Layout
像Material UI、Bootstrap和Ant Design这样的前端库,通过简化布局和提高开发速度,使开发者的工作更加轻松。现在有了一个新的库Atomic Layout,它使用完全不同的方法来创建可重用的布局单元。 当使用现有的前端库创建一个特定的布局时,组件和间距都取决于上下文,反之亦然。这种相互依赖使得布局风格变得不灵活,在尝试进行任何改进或修改时,都让开发者感到头痛。 Atomic Layout遵循原子设计原则,使用CSS网格来创建可重用的布局单元。它通过解耦间距和组件来避免相互依赖,从而为创建布局创造无上下文的单元。 安装 Atomic Layout是一个基于React的库,使用样式化组件。首先创建一个React应用并安装所需的包。 安装 Create React App。 $ npx create-react-app atomic-layout 复制代码 安装styled-components。 $ npm i styled-components atomic 复制代码 部署 Atomic Layout是一个由多个子元素组成的实际物理实体。例如,一个标题是...
