refactor(newsletter): new names for html classes were created using BEM

src/template/Newsletter/index.module.scss

@@ -3,47 +3,37 @@
 .newsletter {
 	width: 100%;
 	border-top: 1px solid var(--clr-common-black);
-}
 
-.container {
-	width: 100%;
-	padding: 16px;
-}
-
-.newsletter h3 {
-	margin-bottom: 16px;
-	font-weight: 500;
-	font-size: var(--txt-normal);
-	line-height: 16.41px;
-
-	text-transform: uppercase;
-	letter-spacing: 0.05em;
-
-	color: var(--clr-gray-800);
-
-	@media screen and (min-width: 1025px) {
-		font-size: var(--txt-large);
-		line-height: 21.09px;
-	}
-
-	@media screen and (min-width: 2500px) {
-		line-height: 42.19px;
+	&__container {
+		width: 100%;
+		padding: 16px;
 	}
 }
 
-.container {
-	fieldset :global {
-		border: none;
+.newsletter {
+	h3 {
+		margin-bottom: 16px;
+		font-weight: 500;
+		font-size: var(--txt-normal);
+		line-height: 16.41px;
 
-		.form-group {
-			width: 100%;
-			display: flex;
-			align-items: center;
-			flex-direction: column;
-			gap: 8px;
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+
+		color: var(--clr-gray-800);
+
+		@media screen and (min-width: 1025px) {
+			font-size: var(--txt-large);
+			line-height: 21.09px;
+		}
+
+		@media screen and (min-width: 2500px) {
+			line-height: 42.19px;
 		}
 	}
+}
 
+.newsletter__container {
 	@media screen and (min-width: 1025px) {
 		width: function.fluid(474px, 1280px);
 		padding: 16px 0;
@@ -55,7 +45,21 @@
 	}
 }
 
-.container :global {
+.newsletter__container {
+	fieldset :global {
+		border: none;
+
+		.form-group {
+			width: 100%;
+			display: flex;
+			align-items: center;
+			flex-direction: column;
+			gap: 8px;
+		}
+	}
+}
+
+.newsletter__container :global {
 	.form-input {
 		width: 100%;
 		margin-bottom: 16px;
@@ -68,7 +72,9 @@
 			width: function.fluid(668px, 922px);
 		}
 	}
+}
 
+.newsletter__container :global {
 	input {
 		display: block;
 		width: 100%;
@@ -77,9 +83,6 @@
 		border: 1px solid var(--clr-gray-400);
 		font-size: var(--txt-normal);
 		line-height: 16.41px;
-		@media screen and (min-width: 2500px) {
-			line-height: 32.81px;
-		}
 
 		&::placeholder {
 			color: var(--clr-gray-400);
@@ -91,12 +94,13 @@
 		}
 
 		@media screen and (min-width: 2500px) {
+			line-height: 32.81px;
 			height: 59px;
 		}
 	}
 }
 
-.form {
+.newsletter__form {
 	button[type='submit'] {
 		width: 100%;
 		height: 50px;
@@ -130,7 +134,7 @@
 
 .newsletter {
 	@media screen and (min-width: 1025px) {
-		.container {
+		&__container {
 			fieldset :global {
 				.form-group {
 					flex-direction: row;

src/template/Newsletter/index.tsx

@@ -1,7 +1,7 @@
 import { Field, Form, Formik } from 'formik'
 import * as Yup from 'yup'
 
-import css from './index.module.scss'
+import styles from './index.module.scss'
 
 const schema = Yup.object({
 	email: Yup.string().required('Campo Obrigratorio').email('Email ínvalido'),
@@ -9,16 +9,16 @@ const schema = Yup.object({
 
 export function Newsletter() {
 	return (
-		<section className={css.newsletter}>
-			<div className={css.container}>
-				<div className={css.content}>
+		<section className={styles['newsletter']}>
+			<div className={styles['newsletter__container']}>
+				<div className={styles['newsletter__content']}>
 					<h3>Assine nossa newsletter</h3>
 					<Formik
 						initialValues={{ email: '' }}
 						onSubmit={(e) => console.log(e)}
 						validationSchema={schema}
 					>
-						<Form className={css.form}>
+						<Form className={styles['newsletter__form']}>
 							<fieldset className="form-container">
 								<div className="form-group">
 									<div className="form-input">