[Para Revisão] - 5.iii.Location- Independence

chapters/5.iii.location-independence.md

@@ -0,0 +1,13 @@
+# Localização Independência
+
+Dada a natureza sempre em mudança da maioria dos projetos de UI e a mudança para mais arquiteturas baseadas em componentes, é nosso interesse não modelar as coisas com base em onde elas estão, mas no que são. Ou seja, o estilo de nossos componentes não deve depender de onde os colocamos - eles devem permanecer inteiramente independentes da localização.
+
+Vamos dar um exemplo de um botão de chamada para ação que optamos pelo estilo através do seletor a seguir:
+
+	.promo a { }
+
+Não só isso tem pouca intenção do Seletor - ele será um estilo habilidosamente qualquer e qualquer link dentro de um .promo para se parecer com um botão - também é muito desperdiçado como resultado de uma dependência local: não podemos reutilizar esse botão com é um estilo correto fora do .promo porque está explicitamente vinculado a esse local. Um seletor muito melhor teria sido:
+
+	.btn { } .
+
+Esta única classe pode ser reutilizada em qualquer lugar fora de .promo e sempre terá seu estilo correto. Como resultado de um seletor melhor, este pedaço de UI é mais portátil, mais reciclável, não tem dependências e tem muito melhor intenção de seletor. Um componente não deve ter que viver em um determinado lugar para olhar de uma certa maneira.

chapters/5.iv.a-Quasi-Qualified-Selectors.md

@@ -0,0 +1,11 @@
+Seletores qualificados
+
+Uma coisa que os seletores qualificados podem ser úteis é a sinalização onde uma classe pode ser esperada ou destinada a ser usada, por exemplo:
+
+ul.nav { }
+
+Aqui podemos ver que a classe .nav deve ser usada em um elemento ul, e não em um navegador. Ao usar seletores quase qualificados, ainda podemos fornecer essa informação sem realmente qualificar o seletor:
+
+/*ul*/.nav { }
+
+Ao comentar o elemento principal, ainda podemos deixá-lo para ser lido, mas evitemos qualificar e aumentar a especificidade do seletor.

chapters/5.iv.portability.md

@@ -0,0 +1,47 @@
+Portabilidade
+
+Reduzir, ou, idealmente, remover, a dependência de localização significa que podemos mover componentes em torno de nossa marca mais livremente, mas como melhorar a nossa capacidade de mover classes em torno de componentes? Em um nível muito mais baixo, há mudanças que podemos fazer em nossos seletores que tornam os próprios seletores - ao contrário dos componentes que criam - mais portáteis. Faça o seguinte exemplo:
+
+input.btn { }
+
+Este é um seletor qualificado; a entrada principal conecta este conjunto de regras para apenas poder trabalhar em elementos de entrada. Ao omitir essa qualificação, nos permitimos reutilizar a classe .btn em qualquer elemento que escolhemos, como um a, por exemplo, ou um botão.
+
+Os seletores qualificados não se prestam bem a serem reutilizados, e todos os seletores que escrevemos devem ser criados com reuso em mente.
+
+Claro, há momentos em que você pode querer legitimar um seletor - talvez seja necessário aplicar um estilo muito específico a um elemento particular quando ele carrega uma determinada classe, por exemplo:
+
+/**
+ * * Incentivar e colorir qualquer elemento com uma classe de `.error`.
+ */
+.error {
+  color: red;
+  font-weight: bold;
+}
+
+/**
+ * Se o elemento for um `div`, também dê um estilo semelhante a uma caixa.
+ */
+div.error {
+  padding: 10px;
+  border: 1px solid;
+}
+
+Este é um exemplo em que um seletor qualificado pode ser justificável, mas eu ainda recomendaria uma abordagem mais como:
+
+/**
+ * Erros no nível do texto.
+ */
+.error-text {
+  color: red;
+  font-weight: bold;
+}
+
+/**
+* Elementos que contêm erros.
+ */
+.error-box {
+  padding: 10px;
+  border: 1px solid;
+}
+
+Isso significa que podemos aplicar .error-box a qualquer elemento, e não apenas div-é mais reutilizável do que um seletor qualificado.