Скажімо, ваш example.css
вигляд виглядає так:
.classname {
width: 440px;
}
/*#field_teacher_id {
display: block;
} */
form.table-form #field_teacher + label,
form.table-form #field_producer_distributor + label {
width: 300px;
}
.another {
width: 420px;
}
Тепер давайте змінимо селектори стилів у середньому блоці, і поки ми в цьому, видалимо старий коментований стиль, який нам більше не потрібен.
.classname {
width: 440px;
}
#user-register form.table-form .field-type-checkbox label {
width: 300px;
}
.another {
width: 420px;
}
Це було легко, тепер давайте почнемо вчиняти. Але зачекайте, я хочу зберегти логічне відокремлення змін у контролі версій для простого покрокового огляду коду, і щоб ми з моєю командою могли легко шукати історію фіксування конкретних даних.
Видалення старого коду логічно відокремлено від зміни другого вибору стилю. Нам знадобляться два чіткі коміти, тому давайте додамо хунки для виправлення.
git add --patch
diff --git a/example.css b/example.css
index 426449d..50ecff9 100644
--- a/example.css
+++ b/example.css
@@ -2,12 +2,7 @@
width: 440px;
}
-/*#field_teacher_id {
- display: block;
-} */
-
-form.table-form #field_teacher + label,
-form.table-form #field_producer_distributor + label {
+#user-register form.table-form .field-type-checkbox label {
width: 300px;
}
Stage this hunk [y,n,q,a,d,/,e,?]?
Уоуп, схоже, що зміни занадто близькі, тому git зв'язав їх разом.
Навіть спроба розділити його натисканням sмає той самий результат, оскільки розкол недостатньо деталізований для наших змін точності. Для зміни git потрібні незмінні лінії між зміненими лініями, щоб мати змогу автоматично розділити патч.
Отже, давайте редагувати його вручну , натискаючиe
Stage this hunk [y,n,q,a,d,/,e,?]? e
git відкриє патч у нашому редакторі на вибір.
# Manual hunk edit mode -- see bottom for a quick guide
@@ -2,12 +2,7 @@
width: 440px;
}
-/*#field_teacher_id {
- display: block;
-} */
-
-form.table-form #field_teacher + label,
-form.table-form #field_producer_distributor + label {
+#user-register form.table-form .field-type-checkbox label {
width: 300px;
}
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
#
# If the patch applies cleanly, the edited hunk will immediately be
# marked for staging. If it does not apply cleanly, you will be given
# an opportunity to edit again. If all lines of the hunk are removed,
# then the edit is aborted and the hunk is left unchanged.
Розглянемо мету:
Як я можу додати видалення коментарів CSS лише до наступного комітету?
Ми хочемо розділити це на два коміти:
Перший комітет включає видалення деяких рядків (видалення коментарів).
Щоб видалити коментовані рядки, просто залиште їх у спокої, вони вже позначені для відстеження видалень у контролі версій так, як ми хочемо.
-/*#field_teacher_id {
- display: block;
-} */
Другий коміт - це зміна, яку відслідковують, записуючи як видалення, так і доповнення:
Видалення (старі селекторні рядки видалено)
Щоб зберегти старі рядки вибору (не видаляйте їх під час виконання цього зобов'язання), ми хочемо ...
Щоб видалити рядки "-", зробіть їх ""
... що буквально означає заміну -
знаків мінус пробілом
.
Отже, ці три рядки ...
-
-form.table-form #field_teacher + label,
-form.table-form #field_producer_distributor + label {
... стане ( помітьте єдиний пробіл у першому з усіх 3 рядків):
form.table-form #field_teacher + label,
form.table-form #field_producer_distributor + label {
Доповнення (додано новий рядок вибору)
Щоб не звертати увагу на новий рядок вибору, доданий під час виконання цього зобов'язання, ми хочемо ...
Щоб видалити рядки "+", видаліть їх.
... що буквально означає видалити весь рядок:
+#user-register form.table-form .field-type-checkbox label {
(Бонус: якщо ви використовуєте vim в якості редактора, натисніть, ddщоб видалити рядок. Користувачі Nano натисніть Ctrl+ K)
Ваш редактор повинен виглядати так, коли ви зберігаєте:
# Manual hunk edit mode -- see bottom for a quick guide
@@ -2,12 +2,7 @@
width: 440px;
}
-/*#field_teacher_id {
- display: block;
-} */
form.table-form #field_teacher + label,
form.table-form #field_producer_distributor + label {
width: 300px;
}
# ---
# To remove '-' lines, make them ' ' lines (context).
# To remove '+' lines, delete them.
# Lines starting with # will be removed.
#
# If the patch applies cleanly, the edited hunk will immediately be
# marked for staging. If it does not apply cleanly, you will be given
# an opportunity to edit again. If all lines of the hunk are removed,
# then the edit is aborted and the hunk is left unchanged.
Тепер приступимо до виконання.
git commit -m "remove old code"
І просто для того, щоб переконатися, давайте подивимось зміни з останнього комітету.
git show
commit 572ecbc7beecca495c8965ce54fbccabdd085112
Author: Jeff Puckett <jeff@jeffpuckett.com>
Date: Sat Jun 11 17:06:48 2016 -0500
remove old code
diff --git a/example.css b/example.css
index 426449d..d04c832 100644
--- a/example.css
+++ b/example.css
@@ -2,9 +2,6 @@
width: 440px;
}
-/*#field_teacher_id {
- display: block;
-} */
form.table-form #field_teacher + label,
form.table-form #field_producer_distributor + label {
Ідеально - ви можете бачити, що в цю атомну команду були включені лише видалення. Тепер давайте закінчимо роботу і зробимо решту.
git add .
git commit -m "change selectors"
git show
commit 83ec3c16b73bca799e4ed525148cf303e0bd39f9
Author: Jeff Puckett <jeff@jeffpuckett.com>
Date: Sat Jun 11 17:09:12 2016 -0500
change selectors
diff --git a/example.css b/example.css
index d04c832..50ecff9 100644
--- a/example.css
+++ b/example.css
@@ -2,9 +2,7 @@
width: 440px;
}
-
-form.table-form #field_teacher + label,
-form.table-form #field_producer_distributor + label {
+#user-register form.table-form .field-type-checkbox label {
width: 300px;
}
Нарешті ви бачите, що остання фіксація включає лише зміни селектора.