April 24, 2011

Best Practices – CSS Stylesheet Formatting

Question by Justin Niessner

This may seem like a strange question…but here goes:

I’m currently working on creating a fairly large site using table-less design/css (obviously the best way to go). Unfortunately, I have a requirement that is completely out of my control that states I must have only one stylesheet for the site.

In some regards this is better because it forces me to think about style re-use pro-actively while designed the pages. On the other hand…the stylesheet is becoming monolithic and I’m quickly losing myself trying to find styles I know I’ve already defined.

I’d like to do myself (and anybody who has to work on the site in the future) a favor and make the CSS as readable and easy to update as possible. That’s where you come in. I’m looking for formatting/organizational suggestions/best practices.

Somebody out there has to be better at it than I am.

Answer by Hexxagonal

Why not have multiple stylesheets on your development boxes, but have them merged into one in your deploy scripts.

Answer by Starx

I seem to have a different type of CSS Coding Style. I tend to apply a pattern similar to programming.

Here is a sample markup and the way I style them.

<div id="menubar">
   <ul>
      <li>
        <a href="#">Test</a>
      </li>
   <ul>
</div>

<div id="footerMenubar">
   <ul>
      <li>
        <a href="#">Test</a>
      </li>
   <ul>
</div>

CSS

html {}
    body {}

   #menubar {}
      #menubar ul {}
          #menubar ul li {}
              #menubar ul li a {}


   #footerMenubar {}
      #footerMenubar ul {}
          #footerMenubar ul li {}
              #footerMenubar ul li a {}

Of course, some of you will raise a topic about the file size, but I gain much more efficiency and readability using this pattern that I am willing to compromise a little bit of file size. Furthermore, it also gives a idea of the position where a particular markup lies in the HTML file also.

(P.S, Same answer can be found here too.

June 13, 2010

Opinions sought on the best way to organise classes in PHP

Question by jax

I am pretty much set on using the Java package naming convention of

com.website.app.whatever

but am unsure about the best way of doing this in PHP.

Option 1:

Create a directory structure

com/
    mysite/
          myapp/
               encryption/
                         PublicKeyGenerator.class.php
                         Cipher.class.php
               Xml/
                         XmlHelper.class.php
                         XmlResponse.class.php

Now this is how Java does it, it uses the folders to organize the heirarchy. This is however a little clumsy in PHP because there is no native support for it and when you move things around you break all includes.

Option 2

Name classes using a periods for the package, therefore names are just like in Java but can all be in the same directory making __autoload a breeze.

classes/
        com.mysite.myapp.encription.PublicKeyGenerator.class.php
        com.mysite.myapp.encription.Cipher.class.php
        com.mysite.myapp.xml.XmlHelper.class.php
        com.mysite.myapp.xml.XmlResponse.class.php

The only real disadvantage here is that all the classes are in a single folder which might be confusing for large projects.

Opinions sought, which is the best or are there other even better options?

Answer by allenskd

You could follow Zend Framework standards like

Option1 with autoload

new App_Encryption_Cipher

in autoload magic callback replace the _ to ‘/’ and do further checking (the file exists? garbage in the filename being seek? symbols?)

This is however a little clumsy in PHP because there is no native support for it and when >> you move things around you break all includes.

Depends on how you plan/design your application. there is no escape when it comes to refactoring anyway 🙂

I know you are used to java naming conventions, but if you do something like (new com_mysite_myapp_encryption_cypher) well, it kinda becomes a pain to write all the time

Answer by Starx

I would suggest Option 1, because in that layout in particular is the separation of codes, which will end up as a much manageable and flexible system.

...

Please fill the form - I will response as fast as I can!