Коли я повинен використовувати рамку CSS?


11

Які сценарії найкращої практики використання рамки CSS? Коли краще "катати свій" CSS з нуля, а не використовувати рамки?

Відповіді:


11

Структури CSS трохи складні, тому що насправді це не рамки для мене. Вони просто заздалегідь визначені класи. Але це не ваше питання.

Структури CSS чудово підходять для макетів та каркасів. Я б не рекомендував використовувати їх на реальному сайті, оскільки вони додають безглузді класи до вашої розмітки. ".span3" нічого не кажіть мені про зміст, лише про дизайн.

Однак у програмі є кілька цікавих інструментів, які допомагають поєднати її рамкові класи та семантичні класи після завершення.

Я завжди катаю свій власний CSS.


4
Я з Thorn007 на цьому. CSS досить проклятий, коли ви переходите до нього. Просто скористайтеся хорошим скиданням CSS та прокрутіть свій власний.
jessegavin

3

Просто уникайте їх, вони нічого не дратують.

Особливо цей.

* { margin:0; padding:0; }

Моя найбільша скарга полягає в тому, що якщо ви успадковуєте / підтримуєте сайт, який використовує скидання та / або фреймворк, ви повинні вивчити цю структуру, перш ніж мати змогу змінювати сайт.

Коли я додаю тег h1, я очікую певних речей. Більшість скидів забирають усі прокладки, поле, блок тощо, так що тег h1 більше не працює, як слід, за замовчуванням. Тож я мушу повернутися назад і додати все, що там було, в першу чергу.

Взагалі (на мій досвід) його люди, які не розуміють css, які використовують скидання та рамки, і це спричиняє більше роботи для людей, які роблять.


1
Ерік Мейєр та веб-розробники Yahoo розуміють CSS, і вони використовують скиди CSS. З мого досвіду, вони економлять багато часу і головний біль, намагаючись досягти узгодженості браузера. - Рамки CSS хоч і кульгаві.
jessegavin

Коли я додаю тег h1, я очікую певних речей .. на жаль, потрібно очікувати різних речей від кожного браузера .. і, отже, необхідність скидання css ( не рамки )
Gabriele Petrioli

h1 - досить поганий приклад, тому що браузери, як правило, використовують різні поля тощо. Особисто я віддаю перевагу "встановити" для скидання - тобто замість того, щоб скидати все до 0, просто встановіть його у власному таблиці стилів в першу чергу!
НезадоволенняГота

* {margin:0; padding:0;}є найважливішим скиданням CSS з усіх. Він видаляє margin-top/maring-bottomпід усіма тегами навіть pтеги, тому після того, як ви не побачите величезного простору між кожним рядком. Навіть цей веб-сайт, ймовірно, використовує, p {margin:0;}інакше браузер проживе величезний простір між кожним рядком. Мені цікаво, як можна сказати, що вони дратують.
Марко Демайо

2

На мою думку, єдиний сервіс, який надає CSS Framework, є відправною точкою для тих, хто не дуже знайомий з CSS.


2

Я також рекомендую використовувати reset.css від Еріка Мейєра, але я думаю, що "рамки" CSS можуть бути корисними для верстки. План, сітка YUI та 960-сітка можуть допомогти вам досягти деяких дуже складних макетів, не записуючи css самостійно.

Хоча є недоліки, про які було сказано, те саме можна сказати і про створення веб-сайту за допомогою CMS замість того, щоб прокручувати спеціальний код, наприклад, але вони все ще можуть бути корисними, і для багатьох сайтів переваги, що отримуються, переважають над сторонніми проблемами css або продуктивності.


1

Якщо ви реально реалізуєте власний дизайн, ви збираєтесь написати деякі свої власні CSS (якщо хтось інший не написав потрібний дизайн).

Якщо припустити, що ви пишете деякі власні CSS, "фреймворки" можуть бути корисними, коли у вас є такі стилі:

  1. використовується в більш ніж одному місці; і
  2. досить складний, щоб переламатись у власні заняття

Для дійсно простих стилів краще використовувати класи, щоб вказати, що таке (наприклад class="navigation"), а потім визначити його вигляд, застосувавши правила стилю до цього класу у вашій таблиці стилів.

Але для більш складних стилів, які не обов'язково прив'язуються до якогось одного елемента (наприклад, стилів, пов’язаних з компонуванням, типу, яким фреймворки дають імена .span3), немає нічого поганого в тому, щоб розмістити їх у класі та застосувати цей клас у CSS. Ви можете використовувати обидва підходи разом.

На великих, більш складних сайтах, де елементи, можливо, поєднуються непередбачуваними способами, рамкоподібний підхід справді може допомогти зберегти ваш код керованим.

Я б сказав, що ви також можете написати свій «фреймворк». Я поставив "фреймворк" у лапках, оскільки CSS насправді не така велика мова. Ви можете прочитати CSS: Постійний посібник (Ерік Мейєр) за день, потім прочитати весь код, наприклад, Blueprint ("рамка" CSS) і майже зрозуміти, що відбувається. Можливо, вам доведеться трохи вивчити обхід IE, але ми говоримо хоча б на порядок меншу складність, ніж наприклад, jQuery тут.


1

Я використовую план, для CSS.
CSS, як кажуть всі вище, справді простий.

Однак насправді ви повинні врахувати платформу.

З CSS двигун візуалізації додає складності.

Gecko vs WebKit vs Presto vs Trident ... хто хоче все це робити?

Що тут дає вам "фреймворк" - це можливість писати макети, які, швидше за все, спрацюють у всіх браузерах, тому вам не доведеться гугнути для IE 7 quirksmode "WTF-am-I-doing = -this-crap" IE 7 виправити, або щось подібне смішно.

Рамки будуть робити 90% потрібного макета, а потім ви завжди зможете додавати свої власні стилі пізніше.

Отже, щоб відповісти на запитання, я б сказав, виберіть будь-яку основу і подивіться, чи працює вона для вас. Це просто може. Тоді ви золоті, і можете повернутися до того, що ви насправді хотіли зробити. Якщо ні, то розкладіть його, використовуючи css та змініть те, що не працювало. Таким чином ви зберігаєте перехресну перевагу браузера, але все одно можете налаштувати.

Як невелику користь, якщо ви виберете його та постійно користуєтесь ним, а потім захворіли, або отримаєте підвищення кваліфікації та повинні навчати свого наступника, ви можете сказати:

"Так, я використовував рамки ABC. Тут є документи. Код є. Тренування закінчено. Удачі".


0

Коли це вирішує всі ваші потреби . (На основі цього лежить ідея пошиття одягу .)

З єдиної книги про рамки? http://www.oreilly.com/web-platform/free/book-of-html-css-frameworks.csp . (Посилання лише через те, що це безкоштовно і актуально тут.)


Можливо, найкраще, якщо ви зможете вирізати та вставити відповідні частини сторінки, на яку ви пов’язані. Інакше як відповідь це такий вид світла. Тут не відволікаються лише відповіді на посилання, оскільки з часом посилання часто розриваються. Чи можете ви оновити цю відповідь, щоб допомогти ОП та майбутнім користувачам щось, у що вони можуть занурити зуби ?? Спасибі заздалегідь!
closetnoc
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.