Share
Cela ressemble à un oxymore, ou du moins à une impossibilité, n'est-ce pas? Comment un langage statique qui ressemble vraiment plus à du balisage qu'à la programmation peut-il être orienté objet? Dans ce tutoriel, je vais vous présenter le concept de CSS orienté objet, vous montrer comment cela fonctionne et essayer de vous convaincre que vous devriez également l'utiliser.!
CSS orienté objet, à la base, écrit simplement plus proprement, SECer CSS. Ce n'est pas une langue différente: c'est toujours le même vieux CSS que nous connaissons et aimons tous. C'est juste un changement de paradigme. Vraiment, CSS orienté objet est quelques modèles simples et meilleures pratiques.
Alors, pourquoi l'appeler orienté objet? Eh bien, selon Wikipedia,
La programmation orientée objet (POO) est un paradigme de programmation qui utilise des "objets" - structures de données composées de champs de données et de méthodes - et leurs interactions pour concevoir des applications et des programmes informatiques..
Si nous devions réécrire cette définition pour le CSS orienté objet, cela pourrait dire quelque chose comme ceci:
Le CSS orienté objet est un paradigme de codage qui permet de styliser des morceaux de code HTML "modulables" ou "de modules" qui définissent une section d'une page Web avec des styles robustes et réutilisables..
Cela signifie essentiellement que vous avez un "objet" standard (une structure HTML). Ensuite, vous avez des classes CSS que vous appliquez aux objets, qui définissent la conception et le flux de l'objet.
Confus? Regardons un peu de théorie.
Il existe deux principes principaux [en CSS orienté objet]: le premier consiste à séparer la structure de la peau et le second consiste à séparer le conteneur du contenu..
Je cite Nicole Sullivan, dont l’invention CSS est une idée originale. Alors, comment ces deux principes se jouent-ils?
Séparer la structure de la peau signifie que votre style de mise en page et votre style de conception sont séparés. Un moyen très pratique de faire cela consiste à utiliser un système de grille; il y a beaucoup d'options, ou vous pouvez créer les vôtres. Si vous n'utilisez pas de système de grille, vous devrez probablement simplement définir la structure de l'objet principal de votre page. c'est ce que nous allons faire aujourd'hui.
Séparer le conteneur du contenu signifie que tout objet (le conteneur) doit être capable de s’adapter pour accepter tout contenu; par exemple, il ne devrait pas avoir besoin d'avoir un h3 en haut, suivi d'une liste non ordonnée pour que le résultat soit correct. Cela permet la flexibilité et la réutilisabilité, ce qui est primordial.
Il y a quelques bonnes raisons pour lesquelles vous voudriez écrire votre CSS de manière orientée objet. L'un des plus gros avantages - et nous l'avons déjà mentionné - est que votre code CSS sera plus réutilisable. Mais vos feuilles de style devraient également devenir beaucoup plus petites. CSS orienté objet devrait faciliter la modification de la conception d'un site.
Écrire votre style de cette façon peut également vous apporter une tranquillité d'esprit: il sera beaucoup plus facile de modifier certaines parties de votre site sans casser des choses. CSS orienté objet vous permet également de modifier votre site de manière cohérente.
Eh bien, si vous êtes venus jusqu'ici, vous êtes intéressé par Comment exactement vous écrivez CSS avec un état d'esprit orienté objet. Et c'est parti!
La première étape est vraiment la préparation du CSS: vous devez déterminer votre objet HTML. Généralement, votre objet aura un en-tête, un corps et un pied de page, bien que l'en-tête et le pied de page soient facultatifs. Voici un objet très basique.
Avant de crier "DIVITIS!" se rendre compte que ce n'est pas aussi mauvais qu'il y paraît; considère ceci:
En utilisant HTML5, nous avons maintenant un objet avec une signification sémantique et aucune caractéristique de type soupe. En fait, c'est l'objet que nous allons utiliser aujourd'hui.
Si nous allons écrire du CSS, nous aurons besoin de quelque chose à styler, alors construisons un modèle très basique: une page d'accueil de blog et une seule page de publication. Nous allons utiliser quelques éléments HTML5 et quelques styles CSS3 aujourd'hui!
CSS orienté objet CSS orienté objet
(vraiment juste un tas de bonnes pratiques et modèles; pas un nouveau langage)
10 septembre 2009 Découvrez WorkAwesome!
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
7 septembre 2009 Le post d'intro
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
5 septembre 2009 Bienvenue
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
Je sais que c'est un peu long, alors voici un schéma de notre structure de base:
Semble familier? C'est notre objet, avec un côté ajouté pour notre sidebar. Nous examinerons la page de l'article un peu plus tard, mais passons maintenant au CSS!
Vous remarquerez que nous lions vers trois feuilles de style: reset.css, text.css et styles.css. Reset.css est la réinitialisation d'Eric Meyer. Text.css est important: la deuxième étape du CSS orienté objet consiste à définir quelques éléments de base essentiels; généralement, il s’agit d’éléments de texte, tels que des en-têtes et des listes. Le style de ces objets est important car il détermine l'aspect et la convivialité du site; pour la plupart, ces éléments ne recevront pas de style direct supplémentaire.
Voici ce que nous avons dans notre text.css:
body font: 13px / 1.6 Helvetica, Arial, FreeSans, sans serif; h1, h2, h3, h4, h5, h6 couleur: # 333; h1 font-size: 50px; text-shadow: 1px 1px 0 #fff; famille de polices: noir arial, arial h2 taille de la police: 23 pixels; h3 font-size: 21px; h4 font-size: 19px; h5 font-size: 17px; h6 font-size: 15px; p, h1, h2, h3, h4, h5, h6, ul marge inférieure: 20px; article, apart, dialog, figure, pied de page, en-tête, hgroup, menu, navigation, section display: block;
(Chapeau au système de grille 960, dont le fichier text.css est dérivé.)
Nous allons maintenant commencer à créer styles.css; C'est ici que commence la magie orientée objet. Cependant, je vais d'abord ajouter quelques styles de premier niveau, pour définir un arrière-plan de corps et certains styles de liens et de listes..
body background: url (… /img/grad.jpg) repeat-x # c0c0c0; / * Remarque: Toutes les images seront dans le code source téléchargeable. * / a text-decoration: none; couleur: # 474747; rembourrage: 1px; a: hover background: # db5500; couleur: #fff; .selected border-bottom: 1px solid # db5500; li padding-left: 15px; background: url (… /img/bullet.png) 0 5.9px sans répétition;
Notre premier ordre du jour consiste à définir la structure de la page:
#container margin: 40px auto; largeur: 960px; bordure: 1px solide #ccc; arrière-plan: #ecec; #container> en-tête, #container> footer padding: 80px 80px 80px; largeur: 800px; débordement caché; bordure: 1px solide #ccc; largeur de bordure: 1px 0 1px 0; #container> header background: url (… /img/header.jpg) repeat-x # d9d9d7; #container> en-tête li, #container> footer li float: left; remplissage: 0 5px 0 0; fond: aucun; #container> section background: #fdfdfd; remplissage: 0 40px 40px 80px; float: gauche; largeur: 493px; border-right: 1px solid #ccc; #container> apartement padding-top: 20px; float: gauche; largeur: 346px; #container> footer padding: 40px 80px 80px; arrière-plan: #fcfcfc; #container> footer li: after content: "|" #container> footer li: last-child: after content: ""
Notez que nous appelons notre conteneur en lançant tous nos sélecteurs avec #container. Cependant, c’est un cas particulier: vous voudrez généralement utiliser des classes, car elles sont librement réutilisables..
Nous pouvons utiliser des sélecteurs de classe pour notre style de post:
.post débordement: visible; marge supérieure: 40 px; .post> header margin: 0 0 20px 0; position: relative; .post .date padding: 2px 4px; arrière-plan: # 474747; couleur: #ececec; poids de police: gras; transformer: faire pivoter (270deg); -moz-transform: rotation (270deg); -webkit-transform: rotation (270deg); position: absolue; en haut: 60px; à gauche: -105,5px; .post img float: left; marge droite: 10px; .post.ext img float: right; marge: 0 0 0 10px; .post footer overflow: hidden; .post footer li float: left; fond: aucun;
Regardons ce qui rend ce CSS orienté objet. Premièrement, nous n’avons pas limité la classe à un élément spécifique; nous pourrions l'ajouter à n'importe quoi. Cela nous donne le plus de flexibilité possible. Ensuite, notez que nous n’avons défini aucune hauteur ou largeur; cela fait partie de la séparation de la structure de la peau; nous avons déjà écrit le style sturcture, donc cet objet remplira tout l'espace que la structure lui donne.
De plus, nous avons stylé tous les éléments impliqués de manière indépendante: les éléments parents n’exigent pas que certains enfants aient l’air correct; Bien que nous ayons appelé les éléments enfants, rien ne se cassera s'ils ne sont pas là. Et la plupart des éléments enfants ne dépendent pas de leurs parents; Je n'ai pas appelé le h2 dans un objet de publication, car il devrait être cohérent sur l'ensemble du site; nous nous sommes déjà occupés de cela dans text.css.
Il y a un autre élément important, la partie qui ressemble le plus à la programmation orientée objet: les classes étendues. Vous avez probablement vu que nous avons un style pour .post img et .post.ext img. Je suis sûr que vous savez ce qu'ils vont faire, mais voici la preuve:
En ajoutant simplement une autre classe à votre objet, vous pouvez modifier des aspects mineurs de l'apparence. Je devrais mentionner que Nicole Sullivan aurait créé une classe appelée .postExt, puis appliqué les deux à l’objet; Je préfère le faire de cette façon, car cela me permet d'utiliser le même nom de classe ("ext") pour toutes mes extensions, et je pense que cela rend le HTML plus net. N'oubliez pas de ne pas insérer d'espace dans le sélecteur. ".post .ext" cherchera un élément dans la classe ext à l'intérieur un élément en classe post. Sans espace, il cherchera un élément dans les deux classes.
Maintenant que la zone de contenu principale est définie, regardons la barre latérale. La barre latérale contient deux objets: une liste d’archives et une liste de commentaires récents. Pour commencer, nous allons créer une classe .side-box pour eux:
.side-box remplissage: 20px 80px 20px 40px; .side-box: not (: last-child) border-bottom: 1px solid #ccc; .side-box> en-tête h3 margin-bottom: 0; .side-box> en-tête p text-transform: uppercase; style de police: italique; taille de la police: 90%;
Encore une fois, notez que nous veillons à respecter les deux règles: nous avons séparé la structure de la peau en ne définissant pas la hauteur ni la largeur; l'objet coule pour occuper tout l'espace nécessaire. Et nous avons séparé le conteneur du contenu en ne rendant pas les éléments enfants nécessaires à un style approprié. Oui, j'ai ajusté le style h3, ce qui rend ce h3 particulier dépendant de la classe side-box; dans la plupart des cas, c'est indésirable, mais dans ce cas, je n'ai pas fait trop.
Mais créons une extension pour cela; Toutefois, comme nous souhaitons procéder à un grand ajustement visuel, nous ne étendrons pas directement la classe de la boîte latérale. nous allons créer une nouvelle classe.
.pop-out> section> * display: block; fond: #fefefe; bordure: solide 1px # 474747; rembourrage: 20px; position: relative; largeur: 120%; à gauche: 20px;
Alors qu'est-ce que cela fait? Remarquez le sélecteur: nous ciblons chaque élément directement dans le corps de notre objet; lors du style d'un objet, vous appliquez toujours la classe à l'objet lui-même. Ce CSS "affichera" le contenu à droite.
"HEY, vous définissez une largeur! Pourquoi ne pas séparer la structure de la peau?" J'ai défini une largeur parce que nous ciblons les éléments à l'intérieur du corps de notre objet; puisque l'objet a un bourrage, cet élément interne est un peu étroit par lui-même. Cela ressemble à une excuse pour enfreindre la règle, mais je ne pense pas avoir vraiment enfreint la règle: je règle la largeur sous forme de pourcentage, qui dépend toujours du style de la structure plus loin dans la cascade..
Voici à quoi ça ressemble.
Je viens de vous dire que vous devez toujours appliquer des classes aux objets de niveau supérieur et utiliser des sélecteurs enfants pour mouler les éléments internes. Mais une partie du CSS orienté objet consiste à pouvoir mélanger et faire correspondre les styles facilement. Il est fort possible que vous souhaitiez utiliser un en-tête similaire sur deux objets qui ne sont pas vraiment liés. Il est idéal d'avoir une collection de classes d'en-tête et de pied de page que vous appliquez directement à l'en-tête ou au pied de page d'un objet. De cette façon, vous n’ajoutez pas de code similaire à plusieurs classes non liées, mais vous le résumez et vous l’appliquez à la place appropriée. Créons un en-tête abstrait.
Vous remarquerez que nous avons donné à l'en-tête de nos commentaires récents une classe appelée "post-it". Créons cette classe maintenant.
.post-it border: 1px solid # db5500; rembourrage: 10px; style de police: italique; position: relative; arrière-plan: # f2965c; couleur: # 333; transformer: faire pivoter (356deg); -moz-transform: rotation (356deg); -webkit-transform: rotation (356deg); z-index: 10; en haut: 10 px; box-shadow: 1px 1px 0px # 333; -moz-box-shadow: 1px 1px 0px # 333; -webkit-box-shadow: 1px 1px 0px # 333;
Un semblant de post-it!
Il est important de souligner que même si nous prévoyons utiliser cela pour un en-tête, nous ne l'avons pas spécifié dans le sélecteur. Si cela ressemble à un aspect de conception courant de notre site, nous pourrions en arriver à vouloir ce style pour autre chose; par exemple, nous pourrions l'étendre avec des classes qui ajustent la couleur et la rotation, et les utiliser sur un mur, un tableau bulliten ou quelque chose de similaire..
Ne verrouillez pas vos sélecteurs; vous ne savez jamais quand vous voudrez ces styles!
Souvent, vous voudrez aller au-delà des classes d'en-tête et de pied de page; une bibliothèque de composants est une énorme partie du CSS orienté objet; Une règle de base pourrait être la suivante: chaque fois que vous souhaitez appliquer le même style à plusieurs endroits non liés, abstraite. Bien sûr, vous pourriez trouver, après avoir codé en dur, quelque chose dans un objet qu'il serait plus utile de l’utiliser ailleurs; n'ayez pas peur de refactoriser. C'est toujours à votre avantage.
Vous verrez ces composants dans l'en-tête de page et la boîte de commentaires récents.
.méta taille de la police: 75%; style de police: italique; .subtitle text-transform: majuscule; taille de la police: 90%; poids de police: gras; espacement des lettres: 1px; text-shadow: 1px 1px 0 #fff;
Eh bien, nous en avons terminé avec notre page d’index; regardons un peu plus orienté-objet sur une page de post unique. Copiez simplement cette page d'index, renommez-la 'post.htm' et remplacez l'en-tête de page et la section correspondant à ce code..
CSS orienté objet
(vraiment juste un tas de bonnes pratiques et modèles; pas un nouveau langage)
10 septembre 2009 Découvrez WorkAwesome!
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui, ut tempus tortor. Aliquam enim massa, porta un vehicula in, véhicula à lectus. Ut turpis diam, dit un auteur, bibendum non lectus. Nullam vitae erat un felis pulvinar tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi.
commentaires
Premier commentateur
10 septembre
Lorem ipsum dolor sit amet, consectetur elip adipiscing elit. Suspendisse quis urna dui,
Répondre-commenter
12 septembre
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar
Deuxième commentateur
10 septembre
tempor ut id leo. Accums coréens aux ultrices de feugiat. Duis rhoncus eros id odio faucibus
L'auteur
11 septembre
diam, porttitor a iaculis quis, bibendum non lectus. Nullam vitae erat un felis pulvinar
Quatrième commentateur
12 septembre
imperdiet. Nulla nibh mauris, placer des sagittis placerat sed, commodo in mi
Nous pouvons maintenant voir où une certaine réutilisabilité entre; nous pouvons utiliser la classe post pour la publication du blog ici; c'est la même classe de post que nous avons utilisée pour la page d'accueil; parce que nous n’avons pas spécifié la structure, mais laissé l’objet s’étendre pour prendre tout ce que nous lui donnons, il peut gérer tout le post.
Passons maintenant aux commentaires de cette page. les commentaires sont un excellent endroit pour utiliser CSS orienté objet. Nous allons commencer par ajouter ceci:
.comment border: 1px solid #ccc; border-radius: 7px; -moz-border-radius: 7px; -webkit-border-radius: 7px; rembourrage: 10px; marge: 0 0 10px 0; .comment> en-tête> p font-weight: bold; affichage: en ligne; marge: 0 10px 20px 0;
Cela seul nous donne des commentaires attrayants pour le pseudo; Mais nous pouvons faire plus. Notre code HTML contient des classes pour les réponses et les commentaires des auteurs.
.reply.comment margin-left: 80px; .author.comment color: #ececec; arrière-plan: # 474747;
Assurez-vous de ne pas laisser d'espace entre les deux noms de classe. Ceci est un peu différent de ce que nous avions fait précédemment: au lieu de changer le style de la classe de commentaire, nous l'étendons réellement (donc peut-être que ce sont les vraies classes étendues).
Et les commentaires finis…
Et pendant que nous sommes ici, ajoutons un formulaire de commentaire à notre bibliothèque de composants.
.comments-form p padding: 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; .comments-form p: survoler background: #ececec; libellé de formulaire .comments display: inline-block; largeur: 70px; alignement vertical: en haut; Libellé de formulaire en ligne: after content: ":"; Entrée de formulaire .comments [type = text], bouton de formulaire .comments, textarea de formulaire .com width: 200px; bordure: 1px solide #ccc; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; rembourrage: 2px; bouton de formulaire de type de formulaire [type = submit] margin-left: 70px;
Cela nous donne une belle forme de coin arrondi avec un effet de survol doux.
Je suis un peu déchiré ici; Un concept fondamental de CSS orienté objet est la possibilité d'ajouter une classe à différents éléments. mais qu'en est-il de cette affaire? Cette classe serait fondamentalement inutile sur autre chose qu'une forme; devrions-nous changer les sélecteurs en form.comments-form comme une sorte de sécurité? Qu'est-ce que tu penses?
Eh bien, cela couvre vraiment les idées de CSS orienté objet.
Je n'ai pas utilisé l'exemple de message standard, mais c'est vraiment un excellent moyen d'entrer dans le CSS orienté objet. Essayez de créer une classe de message que vous pouvez appliquer à différents éléments, tels qu'un paragraphe, un élément de liste ou un objet complet. Ensuite, étendez-le avec les classes error, warning et info. Voyez à quel point vous pouvez le rendre flexible et réutilisable.
Je ne pense pas que la réponse à cette question soit un simple "oui" ou "non"; C'est probablement parce que le CSS orienté objet n'est pas un langage, mais un ensemble de modèles et de meilleures pratiques. Vous pouvez ne pas toujours vouloir appliquer l'idée de l'objet HTML standard, mais la plupart des principes CSS sont toujours valables. Si vous y réfléchissez, vous verrez qu'il s'agit vraiment de l'endroit où vous souhaitez optimiser: vous pouvez coder votre code HTML de façon minimaliste, avec quelques ID pour les handles, et pouvoir le styler facilement; mais le CSS ne sera pas réutilisable, et le site risque de se rompre plus tard lorsque vous allez changer les choses. Ou vous pourriez écrire un peu plus de HTML et optimiser le CSS avec les principes que nous avons examinés dans ce tutoriel.
Je suis disposé à développer un peu mon code HTML pour pouvoir écrire des feuilles de style CSS réutilisables, flexibles et sèches. Quelle est votre opinion?
Accentsconagua