Jak zmodyfikować CSS po zmianie wymagań?

Załóżmy, że mam wymóg generowania kilku stron, które mają na nich tabele. Pierwotnym wymaganiem jest, aby wszystkie stoły miały 500px.Jak zmodyfikować CSS po zmianie wymagań?

bym napisać CSS następująco:

table 
{ 
    width: 500px; 
}

które będą miały zastosowanie w różnych dziedzinach dla wszystkich tabel. Co się stanie, jeśli zmienią wymóg, aby niektóre stoły miały 600px. Jaki jest najlepszy sposób modyfikacji CSS? Czy powinienem podać klasy tabel tak

table.SizeOne 
{ 
    width: 500px; 
} 

table.SizeTwo 
{ 
    width: 600px; 
}

Czy jest lepszy sposób, aby poradzić sobie z takimi zmianami?

Źródło

2010-06-17 DaveDev

To wygląda na idealny sposób, aby mi to zrobić. Robię to w ten sposób, to właśnie klasy i identyfikatory są dla :) – Kyle

To wydaje się być dobrym podejściem, chociaż możesz chcieć nadać im bardziej znaczące nazwy;) – ChrisF

P o nazwach CSS, których użyłem, to tylko dla na przykład. Każdy prawdziwy CSS, który tworzę, jest wymieniany bardziej sensownie. Dziękuję wszystkim :-) – DaveDev

Twoja sugestia wymaga dodania klasy do wszystkich tabel, zarówno istniejących, jak i nowych; chociaż mówisz "kilka stron", a zatem można by założyć, że jest tylko kilka tabel.

Jeśli można rozważyć 500px tabel jako standard i 600px jako wyjątki, a następnie kontynuując ustawienie domyślne będzie prawdopodobnie bardziej przydatne:

table 
{ 
    width: 500px; 
} 

table.Wide /* or a more semantic class name */ 
{ 
    width: 600px; 
}

Źródło

2010-06-17 12:35:59 e100

Albo 3. domyślny "stół", a następnie nowe informacje o nazwie "table.SizeOne" i "table.SizeTwo". (i może używaj lepszych nazw). – Johan

Dałbym im klasy o znaczących nazwach zamiast SizeOne i SizeTwo, ale tak, to jest najlepsze podejście.

Źródło

2010-06-17 12:23:09

masz rację - to tylko ze względu na przykład. Każdy prawdziwy CSS, który tworzę, ma nazwy odzwierciedlające to, czym jest, a nie jak się pojawia. – DaveDev

Osobiście lubię używać klas nazwanych po tym, z czym pracuję, takich jak nawigacja lub zawartość. Jeśli używasz nazw klas do określenia rozmiaru, to czujesz się jak w kółko o sposobie wykonywania stylów wbudowanych. Osoba wchodząca i patrząca na css nie wiedziałaby, z czym naprawdę pracuje.

Źródło

2010-06-17 12:24:35

Robię to samo w większości przypadków, ale używanie nazw klas do wskazania rozmiaru nie jest takie złe, jeśli jest połączone z opisowym "identyfikatorem". Następnie można użyć '# search-result .page-wide' oraz' # search-result .column-wide'. Jest to bardzo jasne i opisowe. –

masz rację - to tylko ze względu na przykład. Każdy prawdziwy CSS, który tworzę, ma nazwy odzwierciedlające to, czym jest, a nie jak się pojawia. – DaveDev

To ma sens, a pomysł zajęć jest taki, jaki lubię. Zrobiłbym dwie klasy zamiast nadpisywać wszystkie tabele tylko dlatego, że natknąłem się na więcej problemów w trakcie refaktoryzacji, aby obejść ogólny selektor w nowym obszarze programu dodawanym w znacznie późniejszym terminie. –

-5

Chciałbym napisać:

table 
{ 
    width: 500px; 
}

i użyć czegoś podobnego kontroli wersji SVN. To, co sugerujesz, sprawia, że rzeczy są niezwykle skomplikowane. Lub bez kontroli wersji:

table 
    { 
     /*width: 500px;*/ 
     width: 600px; 

    }

Dodanie wielu klas pokonuje obiekt CSS w mojej opinii.

Źródło

2010-06-17 12:31:12 matpol

OP wymaga tylko * niektórych * tabel do nowej szerokości. Inni pozostają w starym. – ChrisF

oops - nie dla siebie - zawsze przeczytaj poprawnie pytanie – matpol

można zdefiniować klasy, które zastępują podstawowe ustawienia przy użyciu klasy ciała (klasa podana dla znacznika body) lub tak. na przykład jeśli tabela ogólna szerokość jest ustawiona na 100 i na danej stronie (z bodyclass „page2”), trzeba mieć szerokość co 50px, można to zrobić jak

table{ 
width: 100px; 
} 

.page2 table { 
width :50px; 
}

więc druga klasa over ride the first dla jedynej strony, która ma bodyclass = "page2", a każda inna szerokość będzie równa 100.

Dobrą praktyką jest ustawienie nazwy klasy dla ciała na podstawie sekcji.

Źródło

2010-06-17 12:32:51

Jeśli masz kilka różnych układów stron szerokości, to polubisz korzyści z tworzenia niektórych klas układ i dołączając je do swojego ciała (lub inny zawierający tag):

<body class="wide"> 
    <!-- stuff --> 
    <table>...</table> 
</body>

Następnie w CSS:

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px}

Wygląda na stratę czasu i będzie to dla firmy tylko tabelę, ale jeśli w inny sposób stylizujesz obrazy, elementy div itp., Możesz zapisać wiele znaczników HTML.

#wrapper {width:500px;padding:20px 10px} 
body.wide #wrapper {width:600px} 
body.slim #wrapper {width:300px;padding:10px 5px} 

table {width:500px} /* defaults for all tables regardless of class */ 
body.wide table {width:600px} /* overrides for specific layouts */ 
body.slim table {width:300px} 

img {width:500px} 
body.wide img {width:600px} 
body.slim img {width:300px}

Twój 99% kodu HTML pozostaje ten sam (bardzo przydatna jeśli jesteś wyciągając ten z bazy danych i nie chcesz, aby dostosować go za każdym razem, kiedy go używać), wystarczy zmienić klasę ciała.

Źródło

2010-06-17 12:39:32 Oli

Najlepszą metodą byłoby modyfikowanie tabel na podstawie tego, kim są ich rodzice. Na przykład, niektóre strony powinny mieć różne identyfikatory, np:

<body id="contacts"> 
    <table> 
    <tr> 
     <td>Content</td> 
    </tr> 
    </table> 
</body>

Więc w CSS byłoby:

table { 
    width: 500px; 
} 

#contacts table { 
    width: 600px; 
}

Zaletą tego podejścia jest to, że pracujemy w całości w CSS, bez musisz dodać coś do swoich plików HTML. Dodanie klas dla czegoś takiego po prostu sprawi, że twój kod będzie bardziej nieczytelny w przyszłości.

Jeśli Twój HTML nie został napisany z uwzględnieniem odpowiedniego kaskadowania, lepiej dodać odpowiednie identyfikatory do elementów, niż dodać klasy tylko do tabel. Ta wypłata jest znacznie większa w przypadku pracy, którą będziesz musiał wprowadzić.

Źródło

2010-06-17 12:39:59 nyousefi

To rozwiązanie jest w porządku, o ile nie ma potrzeby, aby na tej samej stronie były zarówno szerokość 500px, jak i 600px szeroki. Wtedy to rozwiązanie nie zadziała. –

Jasne, w tym przykładzie zakładamy 1 tabelę na stronę, ale nawet jeśli użyto wielu tabel, ogólny pomysł zawiera: Najpierw sprawdź, czy możesz określić element, który chcesz stylizować za pomocą ich przodków. Jeśli to nie jest opcja, dodaj klasy lub identyfikatory do samych tabel. – nyousefi

+1 za rozwiązanie w powyższym komentarzu. Powinieneś rozważyć dodanie go do odpowiedzi. –

To nie jest dla mnie jak pytanie CSS, tak samo jak zmieniające się wymagania i CSS ... a dokładniej wymagania identyfikowalność w kontekście CSS ...

Obowiązuje to dla wszystkich stołów po całej planszy. Co się stanie, jeśli zmienią wymagania tak, aby niektóre stoły miały 600px.

Wymaganie to nie oznacza tylko "niektóre stoły mają szerokość 600 pikseli", a jeśli tak, potrzebny jest lepszy sposób na uzyskanie wymagań.

Zamiast tego prawdopodobnie będzie to coś w rodzaju "tabel na stronie personelu HR" strona o szerokości 600 pikseli. " Zmodyfikuj regułę CSS specjalnie w tym celu!

body#staff-directory table { 
    width:600px; 
}

... lub „tablice wyników wyszukiwania będzie 600px szerokości.”:

table.search-results { 
    width:600px; 
}

Można toczyć oczy i pomyśl „Ale mam tak wiele podobnych reguł CSS!” ale już raz zmienili zdanie, więc nie bądźcie zaskoczeni, kiedy znów to zrobią!

Te "zbędne" zasady przydadzą się, gdy klient ponownie zmieni wymagania i powie: "Tabela" Katalog personelu "strony będzie mieć szerokość 600 pikseli, tabele wyników wyszukiwania będą miały szerokość 800 pikseli i wszystkie inne stoły mają szerokość 500 pikseli. "
Teraz te marne, nie opisowe atrybuty CSS "Rozmiar1" i "Rozmiar2" uderzyły Cię w stopę.

Źródło

2010-06-17 12:46:39

Przetoczyłem to, ponieważ celowo chciałem używać zarówno "id" i "klasy" w moich regułach CSS. –

to jest to, co powinienem był napisać! Możesz mieć jeden styl i zastosować go do wielu selektorów, np. ciało # tabela spisu personelu, tabela. wyniki wyszukiwania { szerokość: 600px; } Tak właśnie powinienem zrobić cienki kCSS. – matpol

Jak zmodyfikować CSS po zmianie wymagań?

Odpowiedz

Powiązane problemy