Hi David,
On 09.03.2012 12:33, David Thorp wrote:
I've had a couple of private replies saying that this question is
off-topic because it's nothing to do with css. If that's really the
case, then I apologise for the noise, but before we come to that
conclusion may i just clarify something...
I think this subject is on-topic, but not in the way or for the reasons
you originally thought. I'll be more specific in response to some of
your questions below.
On 09/03/2012, at 9:17 PM, David Thorp wrote:
I'm familiar with some concepts from object oriented programming.
In particular something which i think is called encapsulation.
Personally, CSS didn't make sense to me until I started thinking about
it like an object oriented language, but not because of encapsulation,
instead I looked at inheritance. First, keep in mind the distinctions
between a class in an object oriented language and a class in CSS. I
won't go into those distinctions here, just know that when I speak of a
class in CSS, I am not, in anyway, referring back to the idea of classes
in an OO language.
In languages like C++ you build classes which are portable mini
programs that do stuff. You can pick them up and plug them into any
C++ program, you don't have to know how it works, you just know what
it does and its input and output and you can just use it without any
fuss.
Look at a stylesheet structurally where the top of the page are the
base classes and as you move down you expand on those base classes by
sub-classing over and over again [1]. The styles get more specific to a
particular use the more you specify (or sub-class). Using that, you can
set up some generic elements and structures, like your list, that can be
dropped into any page and retain certain layout and cosmetic
characteristics as derived from your base list classes.
Or more accurately, I want to pick that list up and put different
versions of it (ie. same layout but perhaps different numbers of
columns, different alignments in each column, etc) into various
locations in a more complex layout.
Once you have that basic list dropped into a page, it almost has
polymorphic [2] capabilities based on what it's inheriting from. Here's
an example:
HTML:
<div class="wide">
<ul class="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="narrow">
<ul class="my-list">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="horizontal">
<ul class="my-list navigation">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
Styles:
ul.my-list {width:300px; margin:0 0 10px 20px; list-style-type:none;
border:1px solid #ABABAB;}
ul.my-list.navigation {font-weight:bold;}
ul.my-list li {color:green;}
.wide ul.my-list {width:500px;}
.narrow ul.my-list {width:150px;}
.horizontal ul.my-list {float:left; width:575px;}
.horizontal ul.my-list li {float:left; width:80px;}
So in this example, you have a list that is the same structure in all
three cases, but has a very different layout depending on the class (or
id) of its parent container. Additionally, you can add a class (or id)
to the list itself to impart additional styles. You could go even
further by doing something like this:
.horizontal ul.my-list.navigation {color:blue;}
to say a navigation list that's a child of the .horizontal container
will have blue text.
The point is, the same essentially self-contained set of elements can
be presented in very different ways based on the classes/ids you add to
those elements or based on the classes/ids that the element set inherits
from.
Ideally I want to keep that list in it's own file and just refer to
it from the main file. I don't want to have to copy and paste the
code from the list file into the main file.
How you implement getting that element set into a page is up to you and
off-topic to this list.
If this was C++, that would be relatively simple. The class would
have methods that you can call with different parameters for different
situations (eg. number of columns, alignment in each column,
whatever). You then add a #include statement at the beginning of your
main file, that effectively makes the class part of your program, and
you call it from the main file with method calls and parameters, in
each different situation.
Again, not really related, but I wanted to emphasize what I was saying
above about a simple change to a class or how an element set is nested
can dramatically change how those elements are rendered. Maybe a parent
element has a class like "two-column" and a descendant list is then
rendered in multiple columns, just because you changed what its parents
are. Change that parent's class (or add another) and you could again
change how that element set is rendered.
So... my question is... Is this possible in web development at all?
Is it possible just with plain HTML and CSS files?
As demonstrated, this is absolutely possible with plain HTML and CSS.
One of the main reasons why I wanted to respond is because I so often
see flat stylesheets that completely ignore the concepts of inheritance
and specificity and I feel like people are really missing out on the
power (and economy) of well thought out CSS.
[1] This is an extremely simplified approach to stylesheet layout,
particularly when you consider a single page will most likely reference
multiple stylesheets that all operate in the same cascading scope.
[2] My definition, not the OO language definition
--
-Sam
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
