CSS и Javascript слишком тесно связаны (CSS это не просто презентация, а используется UI и JS), как это улучшить?

Question

Я думаю, что идеальным способом является то, что CSS имеет дело только с аспектом представления документа, и поэтому CSS и Javascript отделены друг от друга, и это очень чистое решение.Мы можем изменить любой CSS или любой Javascript, не нарушая другой.

Но что, если мы реализуем причудливый пользовательский интерфейс, такой как серые слова в окне поиска, и слово исчезнет, ​​как только пользователь щелкнет в поле,тип поведения?В таких случаях CSS и Javascript очень связаны, и изменение CSS повлияет на Javascript где-то, и это трудно обрабатывать, потому что в проекте может быть 5000 строк CSS и 8000 строк Javascript, и необходимость охотиться за каждымдругие изменения и изменения их вместе могут сделать его ошибочным и сложным в обслуживании.Есть ли лучший способ или способы сделать это так, чтобы он был более чистым?

Answer 1

IMO, сероватые слова в текстовом поле являются чисто презентационными, а не поведением, поэтому использовать CSS для этого вполне нормально.Если вы попытаетесь реализовать такой пользовательский интерфейс в Javascript, , что - это мутное поведение для представления.

Если у вас 5000 строк CSS, у вас, вероятно, другая проблема.

Answer 2

HTML 5 приносит некоторую функциональность (например, серый текст в поле поиска или новые типы ввода), чтобы попытаться сделать его чище, но да, я знаю, что вы имеете в виду.Давайте просто вспомним, что Microsoft доминировала в Интернете не так давно и сделала из этого беспорядок, добавив такие теги, как blink и markee (или это был Netscape?), И такие технологии, как .htc (IE поведение) и ActiveX.

Существует множество технологий для разработки в сети, но клиентская сторона, я думаю, CSS и Javascript - это ваши единственные варианты, поэтому я думаю, все зависит от того, как вы пишете свой код, и пытаетесь использовать новейшие технологии.технические характеристики (хотя совместимость становится проблемой ...)

Удачи, и если вы что-то узнаете, не стесняйтесь сообщить нам!: D

Answer 3

В некотором смысле это лучше, а в некоторых хуже, но вы можете добавить CSS в свой javascript.Например, многие плагины jquery создают весь CSS, необходимый как часть скрипта, что означает, что вся партия находится в одном месте.

Это лучше, потому что файлы CSS и файлы JS различны, но это включает перемещение презентации вваш слой JS.

Answer 4

HTML4 и CSS 2 не реализуют семантику, необходимую для достижения того, что вы описываете, поэтому вы в конечном итоге используете javascript для решения этих проблем.

HTML5 и CSS3 имеют гораздо лучшую реализацию для разделения слоев,Вы описываете, чтобы CSS / HTML обрабатывал пользовательский интерфейс, а Javascript обрабатывал логику.С введением, например, HTML5 «заполнителя», «обязательных» входных атрибутов и расширенных селекторов CSS3 и свойств контента вы можете добиться гораздо лучшей структуры.

На данный момент используйте ненавязчивый js, где это возможно, иможет быть, с 5000 строк CSS, рассмотрите возможность разделения вашего CSS и JavaScript на более управляемые куски.

Answer 5

Я не думаю, что проблема заключается в тесном соединении CSS и Javascript, проблема в правильном использовании CSS.Если у вас есть фрагмент CSS, тесно связанный с определенной функцией (например, серая рамка), вам не следует повторно использовать его где-либо еще.Если есть его части, которые являются общими для всего сайта (например, базовый стиль), и части, относящиеся к функциональности этого одного элемента, то вам следует разделить класс на две части.

CSS служит двум целям - стилизациии идентификация элементов, которые должны появляться и функции одинаковы.Таким образом, если изменение класса что-то нарушает, значит, вы неправильно используете класс или должны были создать другой.Это больше, чем просто стилизация, это клей.

По аналогии с объектно-ориентированным программированием можно создавать унаследованные классы.Если у вас был класс, который использовался в одном месте, и вам нужно было сделать что-то немного другое в другом месте, вы бы не изменили этот класс, вы бы создали унаследованный класс для вашей новой ситуации, оставив исходный объект без изменений.В CSS вы создали бы другой класс и применили бы и класс стилей, и класс, специфичный для функциональности, к серому исчезающему блоку.Если вы хотите изменить основной стиль, вы можете безопасно обновить класс, который только обрабатывает это.Если вам нужно поработать над конкретным серым квадратом, вы работаете только с классом, уникальным для этой части функциональности.