翻译 | 《JavaScript Everywhere》第13章 设置应用程序款式
写在最后面
大家好呀，我是毛小悠，是一位前端开发工程师。正在翻译一本英文技术书籍。
为了进步大家的浏览体验，对语句的构造和内容略有调整。如果发现本文中有存在瑕疵的中央，或者你有任何意见或者倡议，能够在评论区留言，或者加我的微信：code_maomao，欢送互相沟通交流学习。
(ﾟ∀ﾟ)..:*☆哎哟不错哦
第13章 设置应用程序款式
猫王埃尔维斯·科斯特洛（Elvis Costello）在1978年的单曲《嘴唇服务》（Lip Service）中讥笑这句话：“不要体现得比我高，而要看着你的鞋子。“这种“亲吻”意味着叙述者只有亲吻某人的鞋子，就能察觉出他想要取得更高的社会位置，无论他们的西装如许讲究，衣着如许鄙俗。
不论是好是坏，某些习俗是人类文化的重要组成部分，咱们都习惯于承受这些类型的社交形式。考古学家甚至发现，旧石器时代的人类用骨头，牙齿，浆果和石头制作了项链和手镯。咱们的衣服不仅能够起到爱护人体免受各种元素侵害的性能目标，而且还能够与别人传递无关咱们的文化、社会位置、利益等等的信息。
没有Web的默认款式，Web应用程序依然能够失常工作，然而通过利用CSS，咱们能够更清晰地与用户通信。在本章中，咱们将探讨如何应用CSS-in-JS款式组件库将布局和款式引入咱们的应用程序。这将使咱们可能在可保护的、基于组件的代码构造中做出更实用、更好看的应用程序。
创立布局组件
应用程序的许多页面（在咱们的状况下是全副）将共享一个通用布局。例如，咱们应用程序的所有页面都将具备题目、侧边栏和内容区域（图13-1）。
与其在每个页面组件中导入共享的布局元素，咱们能够创立专门用于咱们的布局的组件并将每个页面组件包装在其中。
图13-1。页面布局的线框
为了创立咱们的组件，咱们将从创立一个新文件src/components/Layout.js开始。在此文件中，咱们将导入共享组件并安排内容。咱们的React组件函数将接管一个children的属性，这将通知咱们在布局中哪里搁置子元素的内容。
让咱们在src/components/Layout.js中创立咱们的组件：
import React from 'react';import Header from './Header';import Navigation from './Navigation';const Layout = ({ children }) => {return (<React.Fragment> <Header /> <div className="wrapper"> <Navigation /> <main>{children}</main> </div> </React.Fragment> );};export default Layout;当初在src/pages/index.js文件中，咱们能够将页面组件包装在新创建的Layout组件中，以将共享布局利用于每个页面：
// import React and routing dependenciesimport React from 'react';import { BrowserRouter as Router, Route } from 'react-router-dom';// import shared layout componentimport Layout from '../components/Layout';// import routesimport Home from './home';import MyNotes from './mynotes';import Favorites from './favorites';// define routesconst Pages = () => {return (<Router>{/* Wrap our routes within the Layout component */}<Layout><Route exact path="/" component={Home} /><Route path="/mynotes" component={MyNotes} /><Route path="/favorites" component={Favorites} /></Layout></Router>);};export default Pages;最初一步是删除页面组件中或页面组件内的所有实例。例如，咱们的src/pages/Home.js文件当初将具备以下简化的代码：
import React from 'react';const Home = () => {return (<div> <p>This is the home page</p> </div>);};export default Home;实现此操作后，你能够在浏览器中查看你的应用程序。在路由之间切换时，咱们会在每个页面上看到咱们的题目和导航链接。目前，它们尚未设置款式，并且咱们的页面没有视觉布局。让咱们在下一部分中摸索增加款式。
CSS
级联样式表准确命名：它们是一组规定，容许咱们编写Web款式。款式为“层叠”，示意将出现最初或最明确定义的款式。例如：
p {color: green}p {color: red}该CSS会将所有段落出现为红色，从而使色彩：绿色规定被笼罩。这是一个很简略的想法，然而为了防止谬误，它产生了许多模式和技术。
BEM（块元素修饰符），OOCSS（面向对象CSS）和Atomic CSS等CSS构造技术应用说明性的类命名来帮忙作用域款式。诸如SASS（语法很棒的样式表）和Less（更精简的样式表）之类的预处理器提供了简化CSS语法并启用模块化文件的工具。只管它们各有千秋，然而CSS-in-JavaScript为开发React或其余JavaScript驱动的应用程序提供了引人注目的用例。
那么CSS框架呢？
CSS和UI框架是开发应用程序的风行抉择，这有充沛的理由，它们提供了松软的款式根底，并通过为常见的应用程序模式提供款式和性能来缩小开发人员须要编写的代码量。折衷方案是应用这些框架的应用程序可能在视觉上变得类似，并且可能会减少文件包的大小。然而，这种衡量可能对你来说是值得的。我集体最喜爱应用React的一些UI框架是Ant Design, Bootstrap, Grommet, 和 Rebass
CSS-in-JS
当我第一次遇到CSS-in-JS时，我最后的反馈很吃惊。我在Web规范时代度过了我的Web开发生涯的初期阶段。我持续提倡Web开发的可拜访性和正当的逐渐加强。十多年来，“关注点拆散”始终是我的网络实际的外围。因而，如果你像我一样，只是浏览“ CSS-in-JS”会使你感到讨厌，那么你并不孤独。然而，一旦我进行了适当的（并且没有判断力的）尝试，我很快就被驯服了。CSS-in-JS使咱们能够轻松地将咱们的用户界面视为一系列组件，这是多年来我始终在尝试联合模块化技术和CSS预处理器来实现的工作。
在本书中，咱们将应用Styled Components作为咱们的CSS-in-JS库。它疾速、灵便，正在疾速倒退中，并且是最受欢迎的CSS-in-JS库。Airbnb，Reddit，Patreon，Lego，BBC News，Atlassian等公司也应用它。
款式化组件库的工作形式是容许咱们应用JavaScript的模板字符串语法定义元素的款式。咱们创立一个JavaScript变量，该变量将援用HTML元素及其关联的款式。因为听起来很形象，所以让咱们看一个简略的例子：
import React from 'react';import styled from 'styled-components'const AlertParagraph = styled.p`color: green;`;const ErrorParagraph = styled.p`color: red;`;const Example = () => {return (<div><AlertParagraph>This is green.</AlertParagraph><ErrorParagraph>This is red.</ErrorParagraph></div>);};export default Example;如你所见，咱们能够轻松的确定款式范畴。此外，咱们将款式限定到该特定的组件。这有助于咱们防止在应用程序的不同局部之间产生类名抵触。
创立一个按钮组件
当初咱们对款式化组件有了根本的理解，让咱们将它们集成到咱们的应用程序中。首先，咱们将为元素编写一些款式，这将使咱们可能在整个应用程序中重用该组件。在后面的示例中，咱们将款式与React/JSX代码集成在一起，然而咱们也能够编写独立款式的组件。首先，在src/components/Button.js 处创立一个新文件，从styled-components中导入款式库，而后将可导出组件设置为模板字符串，如下所示：
import styled from 'styled-components';const Button = styled.button` /* our styles will go here */ `;export default Button;搁置好组件后，咱们能够用一些款式填充它。增加一些基线按钮款式以及悬停和活动状态款式，如下所示：
import styled from 'styled-components';const Button = styled.button`display: block;padding: 10px;border: none;border-radius: 5px;font-size: 18px;color: #fff;background-color: #0077cc;cursor: pointer;:hover {opacity: 0.8;}:active {background-color: #005fa3;}`;export default Button;当初，咱们能够在整个应用程序中应用按钮。例如，要在应用程序的主页上应用它，咱们能够导入组件并在通常应用的任何地位应用元素。
在src/pages/home.js中：
import React from 'react';import Button from '../components/Button';const Home = () => {return (<div><p>This is the home page</p><Button>Click me!</Button></div>);};export default Home;这样，咱们编写了一个款式化的组件，能够在应用程序中的任何中央应用它。这对于可维护性十分有用，因为咱们能够轻松地找到款式并在咱们的代码库中进行更改。此外，咱们能够将款式化的组件与标记耦合在一起，从而容许咱们创立小型、可重用和可保护的组件。
增加全局款式
只管咱们的许多款式将蕴含在各个组件中，然而每个站点或应用程序也具备一组全局款式（诸如CSS重置，字体和基准色彩之类的货色）。咱们能够创立一个GlobalStyle.js组件来包容这些款式。
这将与之前的示例有所不同，因为咱们将创立样式表，而不是附加到特定HTML元素的款式。为此，咱们将从styled-components导入createGlobalStyle模块。咱们还将导入normalize.css库，以确保跨浏览器出现统一的HTML元素。最初，咱们将为应用程序的HTML主体和默认链接款式增加一些全局规定。
在src/components/GlobalStyle.js中：
// import createGlobalStyle and normalizeimport { createGlobalStyle } from 'styled-components';import normalize from 'normalize.css';// we can write our CSS as a JS template literalexport default createGlobalStyle` ${normalize}*, *:before, *:after {box-sizing: border-box;}body,html { height: 100%;margin: 0;}body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;background-color: #fff;line-height: 1.4;}a:link, a:visited { color: #0077cc;}a:hover, a:focus { color: #004499;}code,pre {max-width: 100%;} `;要利用这些款式，咱们将它们导入到App.js文件中，并在应用程序中增加元素：
import React from 'react';import ReactDOM from 'react-dom';// import global styles import GlobalStyle from '/components/GlobalStyle';// import routes import Pages from '/pages';const App = () => {return (<div> <GlobalStyle /> <Pages /> </div>);};ReactDOM.render(<App />, document.getElementById('root'));这样，咱们的全局款式将利用于应用程序。在浏览器中预览应用程序时，你会看到字体已更改，链接具备新款式以及边距已删除（图13-2）。
图13-2咱们的应用程序当初已利用了全局款式
组件款式
当初咱们曾经在应用程序中利用了一些全局款式，咱们能够开始对单个组件进行款式化了。在此过程中，咱们还将介绍应用程序的总体布局。对于咱们款式化的每个组件，咱们首先要从styled-components导入款式库。而后，咱们将一些元素款式定义为变量。最初，咱们将在React组件的JSX中应用这些元素。
款式化组件命名
为了防止与HTML元素发生冲突，必须将款式化组件的名称大写。
咱们能够从src/components/Layout.js开始，在这里咱们将款式增加到应用程序布局的构造和标签中。
import React from 'react';import styled from 'styled-components';import Header from './Header';import Navigation from './Navigation';// component stylesconst Wrapper = styled.div`/* We can apply media query styles within the styled component *//* This will only apply the layout for screens above 700px wide */@media (min-width: 700px) {display: flex;top: 64px;position: relative;height: calc(100% - 64px);width: 100%;flex: auto;flex-direction: column;}`;const Main = styled.main`position: fixed;height: calc(100% - 185px);width: 100%;padding: 1em;overflow-y: scroll;/* Again apply media query styles to screens above 700px */@media (min-width: 700px) {flex: 1;margin-left: 220px;height: calc(100% - 64px);width: calc(100% - 220px);}`;const Layout = ({ children }) => {return (<React.Fragment> <Header /> <Wrapper> <Navigation /> <Main>{children}</Main> </Wrapper> </React.Fragment> );};export default Layout;随着咱们Layout.js成分齐全，咱们能够在咱们Header.js和Navigation.js文件增加一些款式：
在src/components/Header.js中：
import React from 'react';import styled from 'styled-components';import logo from '../img/logo.svg';const HeaderBar = styled.header`width: 100%;padding: 0.5em 1em;display: flex;height: 64px;position: fixed;align-items: center;background-color: #fff;box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.25);z-index: 1;`;const LogoText = styled.h1`margin: 0;padding: 0;display: inline;`;const Header = () => {return (<HeaderBar> <img src={logo} alt="Notedly Logo" height="40" /> <LogoText>Notedly</LogoText> </HeaderBar> );};export default Header;最初，在src/components/Navigation.js中：
import React from 'react';import { Link } from 'react-router-dom';import styled from 'styled-components';const Nav = styled.nav`padding: 1em;background: #f5f4f0;@media (max-width: 700px) {padding-top: 64px;}@media (min-width: 700px) {position: fixed;width: 220px;height: calc(100% - 64px);overflow-y: scroll;}`;const NavList = styled.ul`margin: 0;padding: 0;list-style: none;line-height: 2;/* We can nest styles in styled-components *//* The following styles will apply to links within the NavList component */a {text-decoration: none;font-weight: bold;font-size: 1.1em;color: #333;}a:visited {color: #333;}a:hover,a:focus {color: #0077cc;}`;const Navigation = () => {return (<Nav> <NavList> <li> <Link to="/">Home</Link> </li> <li> <Link to="/mynotes">My Notes</Link> </li> <li> <Link to="/favorites">Favorites</Link> </li> </NavList> </Nav>);};export default Navigation;利用这些款式后，咱们当初有了一个齐全款式化的应用程序（图13-3）。展望未来，咱们能够在创立单个组件时利用款式。
图13-3。咱们的应用程序已利用款式
论断
在本章中，咱们向应用程序介绍了布局和款式。应用CSS-in-JS库中的Styled Components，咱们能够编写简明扼要的CSS款式。而后，能够将这些款式利用于单个组件，也能够利用于整个应用程序。在下一章中，咱们将通过实现GraphQL客户端并调用咱们的API来开发功能齐全的应用程序。
如果有了解不到位的中央，欢送大家纠错。如果感觉还能够，麻烦你点赞珍藏或者分享一下，心愿能够帮到更多人。