Refactor css to use more specific rules rather than repeating selectors

woocommerce · Apr 28, 2022 · fd58db1 · fd58db1
1 parent 13e1ac1
commit fd58db1
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 35 deletions.
diff --git a/js/src/get-started-page/features-card/index.scss b/js/src/get-started-page/features-card/index.scss
@@ -1,24 +1,23 @@
 @import "../_shared";
 
 .gla-get-started-features-card {
-	// Adjust <CardHeader> imported from @wordpress/components.
-	// Repeat selector to make it higher priority.
-	.components-card__header.components-card__header {
-		flex-direction: column;
-		gap: $grid-unit-10;
-		padding: $grid-unit-60 $grid-unit * 14.125 $grid-unit-50;
-		text-align: center;
-
-		@media (max-width: $break-small) {
-			padding: $grid-unit-30 $grid-unit-30 $grid-unit-20;
-			gap: $grid-unit-20;
-		}
-	}
-
 	.components-flex {
 		gap: 50px;
 		padding: 0 $grid-unit * 11 $grid-unit-60;
 
+		// Adjust <CardHeader> imported from @wordpress/components.
+		&.components-card__header {
+			flex-direction: column;
+			gap: $grid-unit-10;
+			padding: $grid-unit-60 $grid-unit * 14.125 $grid-unit-50;
+			text-align: center;
+
+			@media (max-width: $break-small) {
+				padding: $grid-unit-30 $grid-unit-30 $grid-unit-20;
+				gap: $grid-unit-20;
+			}
+		}
+
 		&__block {
 			display: flex;
 			flex-direction: column;

diff --git a/js/src/get-started-page/get-started-with-video-card/index.scss b/js/src/get-started-page/get-started-with-video-card/index.scss
@@ -3,30 +3,31 @@
 .gla-get-started-with-video-card {
 	flex-direction: column;
 
-	// Adjust <CardHeader> imported from @wordpress/components.
-	// Repeat selector to make it higher priority.
-	.components-card__header.components-card__header {
-		justify-content: flex-end;
-		padding: $grid-unit * 2.5;
-
-		& > p {
-			margin: 0 1em;
-			line-height: $line-height-smaller;
-			font-size: $helptext-font-size;
-			color: $gray-600;
-		}
+	.components-flex {
+		// Adjust <CardHeader> imported from @wordpress/components.
+		&.components-card__header {
+			justify-content: flex-end;
+			padding: $grid-unit * 2.5;
+
+			& > p {
+				margin: 0 1em;
+				line-height: $line-height-smaller;
+				font-size: $helptext-font-size;
+				color: $gray-600;
+			}
 
-		@media (max-width: $break-small) {
-			justify-content: center;
-			text-align: center;
-			padding: $grid-unit-20;
+			@media (max-width: $break-small) {
+				justify-content: center;
+				text-align: center;
+				padding: $grid-unit-20;
 
-			& > p::after {
-				content: " Google";
-			}
+				& > p::after {
+					content: " Google";
+				}
 
-			& > img {
-				display: none;
+				& > img {
+					display: none;
+				}
 			}
 		}
 	}